diff --git a/assets/css/app.css b/assets/css/app.css index aaa61e4b..d60eaf85 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -109,25 +109,25 @@ #app-sidebar { @apply w-56 transition-all duration-200; } -.sidebar-collapsed #app-sidebar { +html.sidebar-collapsed #app-sidebar { @apply w-16; } -.sidebar-collapsed [data-sidebar-text] { +html.sidebar-collapsed [data-sidebar-text] { display: none; } -.sidebar-collapsed [data-sidebar-section] { +html.sidebar-collapsed [data-sidebar-section] { display: none; } -.sidebar-collapsed .sidebar-collapse-icon { +html.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); } .sidebar-collapse-icon { transition: transform 0.2s ease; } -.sidebar-collapsed [data-sidebar-tooltip] { +html.sidebar-collapsed [data-sidebar-tooltip] { position: relative; } -.sidebar-collapsed [data-sidebar-tooltip]:hover::after { +html.sidebar-collapsed [data-sidebar-tooltip]:hover::after { content: attr(data-sidebar-tooltip); position: absolute; left: 100%; @@ -150,7 +150,7 @@ #main-wrapper { margin-left: 14rem; /* w-56 = 224px */ } - .sidebar-collapsed #main-wrapper { + html.sidebar-collapsed #main-wrapper { margin-left: 4rem; /* w-16 = 64px */ } } diff --git a/assets/js/app.ts b/assets/js/app.ts index 70a8ccdd..85c3c6a7 100644 --- a/assets/js/app.ts +++ b/assets/js/app.ts @@ -1375,29 +1375,15 @@ const StatusTitle = { } } -// 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. +// Sidebar collapse - toggle class on (which LiveView never patches) +// so the state persists across all navigations without flicker. 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') - } - }, - _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)) - }) + const html = document.documentElement + html.classList.toggle('sidebar-collapsed') + localStorage.setItem('sidebarCollapsed', String(html.classList.contains('sidebar-collapsed'))) } }) } diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex index 2b4b4884..f78fa545 100644 --- a/lib/towerops_web/components/layouts.ex +++ b/lib/towerops_web/components/layouts.ex @@ -149,15 +149,6 @@ defmodule ToweropsWeb.Layouts do ~H"""