corbz/pyrss-ng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

multi-column sidebar working

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-01-26 19:55:38 +00:00
parent de2c3c960f
commit 0a4298f49b
3 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/client/public/css/main.css
View File

@ -22,7 +22,8 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
lg:bottom-0
-translate-x-full
transition-all
duration-300
duration-200
ease-in
/* Position and Display */
transform
@ -46,23 +47,25 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
@apply
[--auto-close:lg]
lg:block
lg:translate-x-0
/* lg:translate-x-0 */
lg:end-auto
lg:bottom-0
-translate-x-full
transition-all
duration-300
duration-200
lg:duration-100
ease-in
/* Position and Display */
transform
w-64
h-full
/* hidden */
fixed
top-0
start-64
lg:start-64
start-0
bottom-0
z-[60]
z-[59]
/* Colours and Border */
bg-white

18
src/client/public/css/tailwind.css
View File

@ -1468,6 +1468,10 @@ video {
--auto-close: lg;
}
.\[--is-layout-affect\:true\] {
--is-layout-affect: true;
}
.\[--placement\:bottom-right\] {
--placement: bottom-right;
}
@ -1537,7 +1541,8 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
@ -1561,9 +1566,9 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
.layout-sidebar-guilds {
position: fixed;
top: 0px;
inset-inline-start: 16rem;
inset-inline-start: 0px;
bottom: 0px;
z-index: 60;
z-index: 59;
height: 100%;
width: 16rem;
--tw-translate-x: -100%;
@ -1575,7 +1580,8 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
@ -1583,9 +1589,9 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
.layout-sidebar-guilds {
inset-inline-end: auto;
bottom: 0px;
inset-inline-start: 16rem;
display: block;
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-duration: 100ms;
}
}

51
src/client/views/layout.ejs
View File

@ -6,7 +6,7 @@
<title><%= title %></title>
<link rel="stylesheet" href="/static/css/tailwind.css">
</head>
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 dark">
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400">
<!-- Mobile Sidebar Controls -->
<header class="sticky top-0 inset-x-0 z-20 lg:hidden">
@ -43,13 +43,13 @@
</a>
</li>
<li>
<a href="#" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200" data-hs-overlay="#layoutSidebarGuilds">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
Servers
<svg class="ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
<svg class="block ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
<svg class="hidden ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</a>
</button>
</li>
</ul>
</nav>
@ -57,11 +57,48 @@
<!-- End Sidebar Content -->
</div>
</aside>
<!-- <aside class="layout-sidebar-guilds hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
servers
</aside> -->
<!-- End Sidebar -->
<!-- Guild Sidebar -->
<aside id="layoutSidebarGuilds" class="layout-sidebar-guilds hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
<div class="relative flex flex-col h-full max-h full">
<!-- Guild Sidebar Header -->
<div class="px-6 pt-4 mt-2 flex justify-between items-center">
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-xs font-semibold">
Discord Servers
</span>
<button type="button" data-hs-overlay="#layoutSidebarGuilds">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
</div>
<!-- End Guild Sidebar Header -->
<!-- Guild Sidebar Content -->
<div class="px-4 py-6 w-full h-full flex flex-col flex-wrap">
<ul class="flex flex-col space-y-1">
<% guilds.forEach(guild => { %>
<li>
<a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200" href="#">
<% if (guild.icon) { %>
<img class="size-[34px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
<% } else { %>
<div class="size-[34px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
<span class="text-xs font-semibold"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
</div>
<% } %>
<div>
<span class="font-semibold"><%= guild.name %></span>
<span class="font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span>
</div>
</a>
</li>
<% }); %>
</ul>
</div>
<!-- End Guild Sidebar Content -->
</div>
</aside>
<!-- End Guild Sidebar -->
<!-- Content -->
<div class="w-full lg:ps-64">
<div class="p-4 sm:p-6 space-y-4 sm:space-y-6">