From 7149ab71cdce4e31128bb1da0fb72715c12f27b9 Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Fri, 13 Mar 2026 14:02:19 -0500
Subject: [PATCH] Fix sidebar toggle persisting across navigations

- Add updated() callback to SidebarCollapse hook so state is re-applied
  after LiveView DOM patches (which strip client-side classes)
- Add inline script for synchronous state restore (no flash on nav)
- Sidebar now stays expanded/collapsed until manually toggled
---
 assets/js/app.ts                       | 26 +++++++++++++++++++-------
 lib/towerops_web/components/layouts.ex |  9 +++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/assets/js/app.ts b/assets/js/app.ts
index 69e90563..70a8ccdd 100644
--- a/assets/js/app.ts
+++ b/assets/js/app.ts
@@ -1375,18 +1375,30 @@ const StatusTitle = {
   }
 }
 
-// Sidebar collapse - restore state from localStorage and persist toggle
+// Sidebar collapse - restore state from localStorage and persist toggle.
+// Uses both mounted() and updated() because LiveView DOM patching can
+// strip the client-side "sidebar-collapsed" class on live navigations.
 const SidebarCollapse = {
   mounted(this: any) {
+    this._apply()
+    this._listen()
+  },
+  updated(this: any) {
+    this._apply()
+  },
+  _apply(this: any) {
     if (localStorage.getItem('sidebarCollapsed') === 'true') {
       this.el.classList.add('sidebar-collapsed')
     }
-    this.el.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
-      // The JS.toggle_class will fire, so we check after a tick
-      requestAnimationFrame(() => {
-        const collapsed = this.el.classList.contains('sidebar-collapsed')
-        localStorage.setItem('sidebarCollapsed', String(collapsed))
-      })
+  },
+  _listen(this: any) {
+    this.el.addEventListener('click', (e: Event) => {
+      if ((e.target as HTMLElement).closest('[data-sidebar-toggle]')) {
+        requestAnimationFrame(() => {
+          const collapsed = this.el.classList.contains('sidebar-collapsed')
+          localStorage.setItem('sidebarCollapsed', String(collapsed))
+        })
+      }
     })
   }
 }
diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index d878590a..2b4b4884 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -149,6 +149,15 @@ defmodule ToweropsWeb.Layouts do
 
     ~H"""
     <div id="sidebar-wrapper" phx-hook="SidebarCollapse" class="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <script>
+        // Apply sidebar state synchronously to prevent flash on navigation
+        (function() {
+          var w = document.getElementById('sidebar-wrapper');
+          if (w && localStorage.getItem('sidebarCollapsed') === 'true') {
+            w.classList.add('sidebar-collapsed');
+          }
+        })();
+      </script>
       <!-- Impersonation Banner -->
       <%= if @current_scope && @current_scope.impersonating? do %>
         <div class="bg-yellow-400 border-b-2 border-yellow-600 relative z-50">