From 95ced7007e3b2395f0f6e60b466538faccf4ce93 Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:27:30 -0500
Subject: [PATCH] updated sidebar

---
 components/sidebar.html |  7 +++-
 css/style.css           | 79 +++++++++++++++++++++++------------------
 js/index.js             |  9 ++---
 3 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index cb35a17..08a24ef 100644
--- a/components/sidebar.html
+++ b/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">
diff --git a/css/style.css b/css/style.css
index 530fcae..e8bec95 100644
--- a/css/style.css
+++ b/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. */
-  width: 14rem; /* for example */
-}
-
-/* You could define a class for collapsed states on desktop if desired: */
-.sidebar-collapsed {
-  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 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 16rem; /* Tailwind's w-64 */
+  height: 100vh;
+  background-color: #0f172a;
   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.
-   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. */
-
+/* Mobile (max-width: 767px): Hide sidebar by default */
 @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);
+}
diff --git a/js/index.js b/js/index.js
index 732f1c1..03b408b 100644
--- a/js/index.js
+++ b/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");
-        sidebar.classList.toggle("-translate-x-full");
-        // Toggle the class on #app so it shifts right
+        // Toggle the dedicated class that controls visibility on mobile
+        sidebar.classList.toggle("sidebar-open");
+        // Optionally shift main content on mobile
         app.classList.toggle("sidebar-open");
       });
     }