From 0a26a8b4a845ad530f2a35364f13fabfa893bfee Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 29 Jan 2025 12:36:59 +0000
Subject: [PATCH] sidebar organised

---
 src/client/public/css/main.css     | 162 ++++++++++++----
 src/client/public/css/tailwind.css | 284 ++++++++++++++++++++---------
 src/client/views/layout.ejs        | 134 +-------------
 src/client/views/sidebar.ejs       | 153 ++++++++++++++++
 4 files changed, 473 insertions(+), 260 deletions(-)
 create mode 100644 src/client/views/sidebar.ejs

diff --git a/src/client/public/css/main.css b/src/client/public/css/main.css
index 834dbeb..e182eb5 100644
--- a/src/client/public/css/main.css
+++ b/src/client/public/css/main.css
@@ -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;
-}
\ No newline at end of file
+}
+
+/* End Guild Header */
diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css
index b27f038..529f0fd 100644
--- a/src/client/public/css/tailwind.css
+++ b/src/client/public/css/tailwind.css
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs
index fe809f0..a0a61c1 100644
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
@@ -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">
diff --git a/src/client/views/sidebar.ejs b/src/client/views/sidebar.ejs
new file mode 100644
index 0000000..555737c
--- /dev/null
+++ b/src/client/views/sidebar.ejs
@@ -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 -->
\ No newline at end of file