From 0a08d0f268bee037086374ac98a523fa82921232 Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Sun, 17 May 2026 12:52:57 +0200
Subject: [PATCH] =?UTF-8?q?fix(bug-2):=20sidebar=20width=20via=20CSS=20att?=
 =?UTF-8?q?ribute=20=E2=80=94=20bypasses=20@persist=20Alpine=20reactivity?=
 =?UTF-8?q?=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@persist disconnects Alpine :class bindings from store reactivity on re-render.
Solution: drive sidebar width via html[data-sidebar-collapsed] CSS attribute
(same mechanism as skeleton) instead of Alpine :class.

- _syncDataset() now uses isCollapsed (respects mobile: never narrow on <768px)
- Blocking script checks window.innerWidth >= 768 before setting attribute
- Resize handler calls _syncDataset() to update attribute on viewport change
- aside gets sidebar-aside class; CSS sets 15rem/4rem at md+ via attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/js/bootstrap.js                    | 3 ++-
 resources/views/components/sidebar.blade.php | 3 +--
 resources/views/layouts/nimuli-app.blade.php | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 69ad520..0f1fddc 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -70,10 +70,11 @@ document.addEventListener('alpine:init', () => {
             window.addEventListener('resize', () => {
                 this.isMobile = window.innerWidth < 768;
                 this.isCollapsed = this.collapsed && ! this.isMobile;
+                this._syncDataset();
             });
         },
         _syncDataset() {
-            if (this.collapsed) {
+            if (this.isCollapsed) {
                 document.documentElement.dataset.sidebarCollapsed = '1';
             } else {
                 delete document.documentElement.dataset.sidebarCollapsed;
diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
index 53df244..bbd1927 100644
--- a/resources/views/components/sidebar.blade.php
+++ b/resources/views/components/sidebar.blade.php
@@ -98,8 +98,7 @@
 
 <aside
     x-data="{ wsOpen: false }"
-    :class="$store.sidebar.isCollapsed ? 'w-16' : 'w-60'"
-    class="fixed inset-y-0 left-0 h-screen flex flex-col bg-s1 border-r border-white/[.06] z-40 -translate-x-full md:translate-x-0 transition-[width,transform] duration-200 ease-in-out"
+    class="sidebar-aside fixed inset-y-0 left-0 h-screen flex flex-col bg-s1 border-r border-white/[.06] z-40 -translate-x-full md:translate-x-0 transition-[width,transform] duration-200 ease-in-out"
     :style="$store.sidebar?.mobileOpen ? 'translate: 0' : null"
 >
     <!-- Header: Logo + Workspace Switcher -->
diff --git a/resources/views/layouts/nimuli-app.blade.php b/resources/views/layouts/nimuli-app.blade.php
index d6d6ce4..8e6d336 100644
--- a/resources/views/layouts/nimuli-app.blade.php
+++ b/resources/views/layouts/nimuli-app.blade.php
@@ -19,7 +19,7 @@
     <script>
         (function () {
             try {
-                if (localStorage.getItem('sidebarCollapsed') === 'true') {
+                if (localStorage.getItem('sidebarCollapsed') === 'true' && window.innerWidth >= 768) {
                     document.documentElement.dataset.sidebarCollapsed = '1';
                 }
             } catch (e) {}
@@ -92,6 +92,8 @@
         @media (min-width: 768px) {
             .nim-content { margin-left: 210px; }
             html[data-sidebar-collapsed] .nim-content { margin-left: 55px; }
+            .sidebar-aside { width: 15rem; }
+            html[data-sidebar-collapsed] .sidebar-aside { width: 4rem; }
         }
         body.app-ready .app-spinner,
         body.app-ready .skel-sidebar,