From 7699b4b01bb807dda324cdacbf52a126e59e4830 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 2 May 2026 18:28:39 +0200
Subject: [PATCH] feat: make sidebar collapsable

---
 templates/base.gohtml                  | 42 +++++++++++++++++++++++++-
 templates/components/header.gohtml     |  3 ++
 templates/components/navigation.gohtml |  8 ++---
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/templates/base.gohtml b/templates/base.gohtml
index d64a3a8..674b402 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -17,6 +17,46 @@
   <script type="module" src="/dist/static/dedupe.js" defer></script>
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
   <script>
+    function toggleSidebar() {
+      const sidebar = document.getElementById('mobile-menu');
+      const isCollapsed = sidebar.classList.contains('lg:w-20');
+      
+      if (isCollapsed) {
+        sidebar.classList.remove('lg:w-20');
+        sidebar.classList.add('lg:w-64');
+        localStorage.setItem('sidebar-collapsed', 'false');
+      } else {
+        sidebar.classList.remove('lg:w-64');
+        sidebar.classList.add('lg:w-20');
+        localStorage.setItem('sidebar-collapsed', 'true');
+      }
+
+      // Update navigation items visibility
+      document.querySelectorAll('.nav-label-container').forEach(el => {
+        if (isCollapsed) {
+          el.classList.remove('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
+          el.classList.add('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
+        } else {
+          el.classList.remove('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
+          el.classList.add('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
+        }
+      });
+    }
+
+    // Initialize sidebar state on load
+    document.addEventListener('DOMContentLoaded', () => {
+      const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+      if (isCollapsed && window.innerWidth >= 1024) {
+        const sidebar = document.getElementById('mobile-menu');
+        sidebar.classList.remove('lg:w-64');
+        sidebar.classList.add('lg:w-20');
+        document.querySelectorAll('.nav-label-container').forEach(el => {
+          el.classList.remove('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
+          el.classList.add('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
+        });
+      }
+    });
+
     function toggleMobileMenu() {
       const menu = document.getElementById('mobile-menu');
       if (menu.classList.contains('-translate-x-full')) {
@@ -117,7 +157,7 @@
         <!-- Sidebar -->
         <div id="mobile-menu" class="fixed inset-y-0 left-0 z-50 shrink-0 overflow-hidden transform transition-all duration-300 lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100vh-4rem)] -translate-x-full lg:shadow-none lg:w-64 lg:translate-x-0 w-64 shadow-2xl">
           {{block "sidebar" .}}
-            {{template "navigation" dict "CurrentPath" .CurrentPath "IsCollapsed" false}}
+            {{template "navigation" dict "CurrentPath" .CurrentPath}}
           {{end}}
         </div>
   
diff --git a/templates/components/header.gohtml b/templates/components/header.gohtml
index 0bc29e5..dec3193 100644
--- a/templates/components/header.gohtml
+++ b/templates/components/header.gohtml
@@ -5,6 +5,9 @@
       <button onclick="toggleMobileMenu()" class="block text-neutral-400 transition-colors hover:text-white focus:outline-none md:hidden">
         <svg 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="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
       </button>
+      <button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-white focus:outline-none lg:block">
+        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
+      </button>
       <a href="/" class="group flex items-center gap-2 focus:outline-none">
         <svg class="h-7 w-7 transition-transform group-hover:scale-110" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M15 80 L25 30 L50 60 L75 30 L85 80" stroke="currentColor" class="text-accent" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/templates/components/navigation.gohtml b/templates/components/navigation.gohtml
index c6683e7..bf0c6e3 100644
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -20,7 +20,7 @@
         <path d="M3 9l9-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>
-      <div class="grid transition-all duration-300 ease-in-out {{if $isCollapsed}}grid-cols-[0fr] opacity-0 ml-0{{else}}grid-cols-[1fr] opacity-100 ml-4{{end}}">
+      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Home</span>
         </div>
@@ -43,7 +43,7 @@
         <line x1="17" y1="17" x2="22" y2="17" />
         <line x1="17" y1="7" x2="22" y2="7" />
       </svg>
-      <div class="grid transition-all duration-300 ease-in-out {{if $isCollapsed}}grid-cols-[0fr] opacity-0 ml-0{{else}}grid-cols-[1fr] opacity-100 ml-4{{end}}">
+      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Browse</span>
         </div>
@@ -60,7 +60,7 @@
         <circle cx="12" cy="12" r="10" />
         <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
       </svg>
-      <div class="grid transition-all duration-300 ease-in-out {{if $isCollapsed}}grid-cols-[0fr] opacity-0 ml-0{{else}}grid-cols-[1fr] opacity-100 ml-4{{end}}">
+      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Discover</span>
         </div>
@@ -76,7 +76,7 @@
       <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="currentColor">
         <path d="M17 18.113l-3.256-2.326A2.989 2.989 0 0 0 12 15.228c-.629 0-1.232.194-1.744.559L7 18.113V4h10v14.113zM18 2H6a1 1 0 0 0-1 1v17.056c0 .209.065.412.187.581a.994.994 0 0 0 1.394.233l4.838-3.455a1 1 0 0 1 1.162 0l4.838 3.455A1 1 0 0 0 19 20.056V3a1 1 0 0 0-1-1z" />
       </svg>
-      <div class="grid transition-all duration-300 ease-in-out {{if $isCollapsed}}grid-cols-[0fr] opacity-0 ml-0{{else}}grid-cols-[1fr] opacity-100 ml-4{{end}}">
+      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Watchlist</span>
         </div>