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

sidebar organised

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-01-29 12:36:59 +00:00
parent efdda2e18b
commit 0a26a8b4a8
4 changed files with 473 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,11 +14,51 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
}
.sidebar-btn {
@apply 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;
/* Sidebar Components */
.mobile-sidebar-header {
@apply
sticky
top-0
inset-x-0
z-20
lg:hidden;
}
.layout-sidebar-main {
.mobile-sidebar-header .mobile-sidebar-nav {
@apply
flex
p-4
sm:px-6
border-b
bg-white
dark:bg-neutral-800
dark:border-neutral-700;
}
.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
@apply text-xl font-semibold;
}
.sidebar-aside {
@apply
/* Position and Display */
transform
w-64
h-full
fixed
top-0
bottom-0
/* Colours and Border */
bg-white
border-e
border-gray-200
dark:bg-neutral-800
dark:border-neutral-700;
}
.sidebar-aside.sidebar-main {
@apply
[--auto-close:lg]
lg:block
@ -29,30 +69,14 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
transition-all
duration-200
ease-in
/* Position and Display */
transform
w-64
h-full
fixed
top-0
start-0
bottom-0
z-[60]
/* Colours and Border */
bg-white
border-e
border-gray-200
dark:bg-neutral-800
dark:border-neutral-700;
}
.layout-sidebar-guilds {
.sidebar-aside.guild-sidebar {
@apply
[--auto-close:lg]
lg:block
/* lg:translate-x-0 */
lg:end-auto
lg:bottom-0
-translate-x-full
@ -60,30 +84,92 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
duration-200
lg:duration-100
ease-in
/* Position and Display */
transform
w-64
h-full
fixed
top-0
lg:start-64
start-0
bottom-0
start-64
z-[59]
/* Colours and Border */
bg-white
border-e
border-gray-200
dark:bg-neutral-800
dark:border-neutral-700;
}
.sidebar-aside .sidebar-container {
@apply
relative
flex
flex-col
h-full
max-h-full;
}
.sidebar-aside .sidebar-container .sidebar-header {
@apply
px-6
pt-4
flex
justify-between
items-center;
}
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
@apply
flex-none
rounded-xl
text-xl
inline-block
font-semibold
focus:outline-none
focus:opacity-80;
}
.sidebar-aside .sidebar-container .sidebar-content {
@apply
h-full
overflow-y-auto
[&::-webkit-scrollbar]:w-2
[&::-webkit-scrollbar-thumb]:rounded-full
[&::-webkit-scrollbar-track]:bg-gray-100
[&::-webkit-scrollbar-thumb]:bg-gray-300
dark:[&::-webkit-scrollbar-track]:bg-neutral-700
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
}
.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
@apply
px-4
py-6
w-full
h-full
flex
flex-col
flex-wrap;
}
.sidebar-nav .sidebar-btn {
@apply
w-full
flex
items-center
gap-x-3.5
py-2
px-2.5
text-sm
rounded-md
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;
}
/* End Sidebar Components */
/* Guild Header */
.guild-header-btn {
@apply text-sm text-gray-800 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500;
}
.guild-header-btn.active {
@apply text-blue-600;
}
}
/* End Guild Header */

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

@ -1347,11 +1347,6 @@ video {
padding-bottom: 0.75rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -1644,12 +1639,195 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
src: url("/static/fonts/inter-variablefont.ttf");
}
.sidebar-btn {
/* Sidebar Components */
.mobile-sidebar-header {
position: sticky;
left: 0px;
right: 0px;
top: 0px;
z-index: 20;
}
@media (min-width: 1024px) {
.mobile-sidebar-header {
display: none;
}
}
.mobile-sidebar-header .mobile-sidebar-nav {
display: flex;
border-bottom-width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 1rem;
}
@media (min-width: 640px) {
.mobile-sidebar-header .mobile-sidebar-nav {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.mobile-sidebar-header .mobile-sidebar-nav:where(.dark, .dark *) {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
}
.sidebar-aside {
position: fixed;
top: 0px;
bottom: 0px;
height: 100%;
width: 16rem;
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));
border-inline-end-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.sidebar-aside:where(.dark, .dark *) {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.sidebar-aside.sidebar-main {
inset-inline-start: 0px;
z-index: 60;
--tw-translate-x: -100%;
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-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
@media (min-width: 1024px) {
.sidebar-aside.sidebar-main {
inset-inline-end: auto;
bottom: 0px;
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));
}
}
.sidebar-aside.guild-sidebar {
inset-inline-start: 16rem;
z-index: 59;
--tw-translate-x: -100%;
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-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
@media (min-width: 1024px) {
.sidebar-aside.guild-sidebar {
inset-inline-end: auto;
bottom: 0px;
display: block;
transition-duration: 100ms;
}
}
.sidebar-aside .sidebar-container {
position: relative;
display: flex;
height: 100%;
max-height: 100%;
flex-direction: column;
}
.sidebar-aside .sidebar-container .sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
}
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
display: inline-block;
flex: none;
border-radius: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
}
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand:focus {
opacity: 0.8;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sidebar-aside .sidebar-container .sidebar-content {
height: 100%;
overflow-y: auto;
}
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar-thumb {
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.sidebar-aside .sidebar-container .sidebar-content:where(.dark, .dark *)::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
}
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar-track {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.sidebar-aside .sidebar-container .sidebar-content:where(.dark, .dark *)::-webkit-scrollbar-track {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar {
width: 0.5rem;
}
.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
flex-wrap: wrap;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.sidebar-nav .sidebar-btn {
display: flex;
width: 100%;
align-items: center;
-moz-column-gap: 0.875rem;
column-gap: 0.875rem;
border-radius: 0.5rem;
border-radius: 0.375rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.625rem;
@ -1660,112 +1838,38 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.sidebar-btn:hover {
.sidebar-nav .sidebar-btn:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.sidebar-btn:focus {
.sidebar-nav .sidebar-btn:focus {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
outline: 2px solid transparent;
outline-offset: 2px;
}
.sidebar-btn:where(.dark, .dark *) {
.sidebar-nav .sidebar-btn:where(.dark, .dark *) {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
}
.sidebar-btn:hover:where(.dark, .dark *) {
.sidebar-nav .sidebar-btn:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.sidebar-btn:focus:where(.dark, .dark *) {
.sidebar-nav .sidebar-btn:focus:where(.dark, .dark *) {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.layout-sidebar-main {
position: fixed;
top: 0px;
inset-inline-start: 0px;
bottom: 0px;
z-index: 60;
height: 100%;
width: 16rem;
--tw-translate-x: -100%;
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));
border-inline-end-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
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: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
/* End Sidebar Components */
@media (min-width: 1024px) {
.layout-sidebar-main {
inset-inline-end: auto;
bottom: 0px;
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));
}
}
.layout-sidebar-main:where(.dark, .dark *) {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.layout-sidebar-guilds {
position: fixed;
top: 0px;
inset-inline-start: 0px;
bottom: 0px;
z-index: 59;
height: 100%;
width: 16rem;
--tw-translate-x: -100%;
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));
border-inline-end-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
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: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
--auto-close: lg;
}
@media (min-width: 1024px) {
.layout-sidebar-guilds {
inset-inline-end: auto;
bottom: 0px;
inset-inline-start: 16rem;
display: block;
transition-duration: 100ms;
}
}
.layout-sidebar-guilds:where(.dark, .dark *) {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
/* Guild Header */
.guild-header-btn {
font-size: 0.875rem;
@ -1806,6 +1910,8 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
/* End Guild Header */
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
@ -2477,4 +2583,4 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
width: 0.5rem;
}
}

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

@ -8,139 +8,7 @@
</head>
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 font-[Inter]">
<!-- Mobile Sidebar Controls -->
<header class="sticky top-0 inset-x-0 z-20 lg:hidden">
<nav class="flex p-4 sm:px-6 border-b bg-white dark:bg-neutral-800 dark:border-neutral-700">
<a href="/" class="text-xl font-semibold">Relay</a>
<button type="button" class="ml-auto" data-hs-overlay="#layoutSidebarMain">
<svg class="shrink-0 size-6" 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"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</nav>
</header>
<!-- End Mobile Sidebar Controls -->
<!-- Sidebar -->
<aside id="layoutSidebarMain" class="layout-sidebar-main hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
<div class="relative flex flex-col h-full max-h-full">
<!-- Sidebar Header -->
<div class="px-6 pt-4 flex justify-between items-center">
<a href="/" class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80">
Relay
</a>
<button type="button" class="lg:hidden" data-hs-overlay="#layoutSidebarMain">
<svg class="shrink-0 size-5" 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<!-- End Sidebar Header -->
<!-- Sidebar Content -->
<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<nav class="px-4 py-6 w-full h-full flex flex-col flex-wrap">
<ul class="flex flex-col space-y-1">
<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">
<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" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Dashboard
</a>
</li>
<li>
<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="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>
</button>
</li>
</ul>
</nav>
</div>
<!-- End Sidebar Content -->
<!-- Sidebar Footer -->
<div class="mt-auto p-2 border-t border-gray-200 dark:border-neutral-700">
<div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative w-full inline-flex">
<button type="button" id="userMenu" class="w-full inline-flex shrink-0 items-center gap-x-2 p-2 text-start text-sm text-gray-800 rounded-md hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1734122415415-88cb1d7d5dc0?q=80&w=320&h=320&auto=format&fit=facearea&facepad=3&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
Username Here
<svg class="block hs-dropdown-open: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"><path d="m18 15-6-6-6 6"/></svg>
<svg class="hidden hs-dropdown-open: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"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
placeholder button
</a>
</div>
<div class="p-1 hs-dropdown flex">
<button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Colour Theme
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
Default (Light)
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
Dark
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
Auto (System)
</button>
</div>
<!-- <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
<span></span>
</a> -->
</div>
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Logout
</a>
</div>
</div>
</div>
</div>
<!-- End Sidebar Footer -->
</div>
</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-1 flex justify-between items-center">
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm 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 href="/guild/<%= guild.id %>" 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">
<% if (guild.icon) { %>
<img class="size-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
<% } else { %>
<div class="size-[28px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
<span class="text-xs"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
</div>
<% } %>
<div>
<span class="text-base"><%= guild.name %></span>
<!-- <span class="text-sm 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 -->
<%- include("sidebar") -%>
<!-- Content -->
<div class="w-full lg:ps-64">

153
src/client/views/sidebar.ejs Normal file
View File

@ -0,0 +1,153 @@
<!-- Mobile Sidebar Controls -->
<header class="mobile-sidebar-header">
<nav class="mobile-sidebar-nav">
<a href="/" class="mobile-sidebar-brand">Relay</a>
<button type="button" class="ml-auto" data-hs-overlay="#layoutSidebarMain">
<svg class="shrink-0 size-6" 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"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</nav>
</header>
<!-- End Mobile Sidebar Controls -->
<!-- Sidebar -->
<aside id="layoutSidebarMain" class="sidebar-aside sidebar-main hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
<div class="sidebar-container">
<!-- Sidebar Header -->
<div class="sidebar-header">
<a href="/" class="sidebar-header-brand">
Relay
</a>
<button type="button" class="lg:hidden" data-hs-overlay="#layoutSidebarMain">
<svg class="shrink-0 size-5" 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<!-- End Sidebar Header -->
<!-- Sidebar Content -->
<div class="sidebar-content">
<nav class="sidebar-nav">
<ul class="flex flex-col space-y-1">
<li>
<a href="/" class="sidebar-btn">
<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" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Dashboard
</a>
</li>
<li>
<button type="button" class="sidebar-btn" 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="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>
</button>
</li>
<li>
<a href="#" class="sidebar-btn">
<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="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
Source Code
</a>
</li>
<li>
<a href="#" class="sidebar-btn">
<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"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
Help
</a>
</li>
<li>
<a href="#" class="sidebar-btn">
<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"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
</li>
</ul>
</nav>
</div>
<!-- End Sidebar Content -->
<!-- Sidebar Footer -->
<div class="mt-auto p-2 border-t border-gray-200 dark:border-neutral-700">
<div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative w-full inline-flex">
<button type="button" id="userMenu" class="w-full inline-flex shrink-0 items-center gap-x-2 p-2 text-start text-sm text-gray-800 rounded-md hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1734122415415-88cb1d7d5dc0?q=80&w=320&h=320&auto=format&fit=facearea&facepad=3&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
Username Here
<svg class="block hs-dropdown-open: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"><path d="m18 15-6-6-6 6"/></svg>
<svg class="hidden hs-dropdown-open: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"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
placeholder button
</a>
</div>
<div class="p-1 hs-dropdown flex">
<button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Colour Theme
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
Default (Light)
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
Dark
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
Auto (System)
</button>
</div>
<!-- <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
<span></span>
</a> -->
</div>
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Logout
</a>
</div>
</div>
</div>
</div>
<!-- End Sidebar Footer -->
</div>
</aside>
<!-- End Sidebar -->
<!-- Guild Sidebar -->
<aside id="layoutSidebarGuilds" class="sidebar-aside guild-sidebar hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
<div class="sidebar-container">
<!-- Guild Sidebar Header -->
<div class="sidebar-header">
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm 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="sidebar-content">
<nav class="sidebar-nav">
<ul class="flex flex-col space-y-1">
<% guilds.forEach(guild => { %>
<li>
<a href="/guild/<%= guild.id %>" class="sidebar-btn">
<% if (guild.icon) { %>
<img class="size-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
<% } else { %>
<div class="size-[28px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
<span class="text-xs"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
</div>
<% } %>
<div>
<span class="text-base"><%= guild.name %></span>
<!-- <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span> -->
</div>
</a>
</li>
<% }); %>
</ul>
</nav>
</div>
<!-- End Guild Sidebar Content -->
</div>
</aside>
<!-- End Guild Sidebar -->