updated sidebar

components/sidebar.html

@@ -1,7 +1,12 @@
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-full -translate-x-full hidden md:translate-x-0 md:block"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
 >
+  <!-- 
+    The sidebar is hidden by default on mobile via CSS (transform: translateX(-100%)).
+    When the "sidebar-open" class is added (via the mobile menu button), CSS will slide it into view.
+    On desktop (min-width: 768px), the sidebar is always visible.
+  -->
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
     <div class="flex-1 overflow-y-auto px-4">

css/style.css

@@ -16,6 +16,9 @@ body {
   background-color: var(--color-bg);
   color: var(--color-text);
   line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden; /* Disable horizontal scrolling */
 }
 
 header {
@@ -473,45 +476,53 @@ footer a:hover {
 
 /* Sidebar default states */
 #sidebar {
-  /* You can set a default width here for 'expanded' state. */
+  position: fixed;
-  width: 14rem; /* for example */
+  top: 0;
-}
+  left: 0;
-
+  width: 16rem; /* Tailwind's w-64 */
-/* You could define a class for collapsed states on desktop if desired: */
+  height: 100vh;
-.sidebar-collapsed {
+  background-color: #0f172a;
-  width: 4rem;
-}
-.sidebar-expanded {
-  width: 14rem;
-}
-
-/* Hide text when collapsed. 
-   If you add .sidebar-collapsed to #sidebar, you can hide text like this: */
-.sidebar-collapsed .sidebar-text {
-  display: none;
-}
-
-/* Basic scrolling for the sidebar if it's long */
-#sidebar {
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  transition: transform 0.3s ease;
 }
 
-/* The top-level container is already "flex min-h-screen" in index.html.
+/* Mobile (max-width: 767px): Hide sidebar by default */
-   The main content (#app) has "flex-1", so it fills the rest of the space. */
-
-/* Example of customizing the border & background in the sidebar */
-#sidebar hr {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-/* If you want a smooth transition for showing/hiding the entire sidebar 
-   on mobile (via the "hidden" class), you can do so with a small fade, 
-   but you’ll need a separate approach with absolute positioning or something 
-   if you prefer a sliding effect. */
-
 @media (max-width: 767px) {
-  .sidebar-open {
+  #sidebar {
+    transform: translateX(-100%);
+  }
+  /* When the sidebar-open class is added, slide the sidebar in */
+  #sidebar.sidebar-open {
+    transform: translateX(0);
+  }
+
+  /* Optionally shift main content when sidebar is open */
+  #app.sidebar-open {
     transform: translateX(16rem);
     transition: transform 0.3s ease;
   }
 }
+
+/* Desktop (min-width: 768px): Always show the sidebar */
+@media (min-width: 768px) {
+  #sidebar {
+    transform: translateX(0) !important;
+  }
+}
+
+/* Collapsed/expanded classes if needed on desktop */
+.sidebar-collapsed {
+  width: 4rem;
+}
+.sidebar-expanded {
+  width: 16rem;
+}
+.sidebar-collapsed .sidebar-text {
+  display: none;
+}
+
+/* Example: customizing the border & background in the sidebar */
+#sidebar hr {
+  border-color: rgba(255, 255, 255, 0.1);
+}

js/index.js

@@ -66,15 +66,16 @@ Promise.all([
   .then(() => {
     console.log("Sidebar loaded.");
 
+    // Assuming mobileMenuBtn, sidebar, and app are already defined:
     const mobileMenuBtn = document.getElementById("mobileMenuBtn");
     const sidebar = document.getElementById("sidebar");
-    const app = document.getElementById("app"); // <-- new
+    const app = document.getElementById("app");
 
     if (mobileMenuBtn && sidebar && app) {
       mobileMenuBtn.addEventListener("click", () => {
-        sidebar.classList.toggle("hidden");
+        // Toggle the dedicated class that controls visibility on mobile
-        sidebar.classList.toggle("-translate-x-full");
+        sidebar.classList.toggle("sidebar-open");
-        // Toggle the class on #app so it shifts right
+        // Optionally shift main content on mobile
         app.classList.toggle("sidebar-open");
       });
     }