From fbb57eec812701e932bff19a5e4597115969744a Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Sat, 16 May 2026 19:07:02 +0200
Subject: [PATCH] fix(bug-2): mobile sidebar close button + desktop-only
 collapse toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add mobile-only X button in sidebar header to call closeMobile()
  (splits workspace-switcher <button> into flex row with close sibling)
- Hide collapse toggle with hidden md:block — mobile only needs open/close,
  desktop uses collapse to go narrow/wide

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/components/sidebar.blade.php | 46 ++++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
index 65f2e82..7e1d67a 100644
--- a/resources/views/components/sidebar.blade.php
+++ b/resources/views/components/sidebar.blade.php
@@ -113,23 +113,31 @@
 
         <!-- Expanded state: full header with workspace switcher -->
         <div x-show="!$store.sidebar.collapsed">
-            <button
-                @click="wsOpen = !wsOpen"
-                class="w-full flex items-center gap-3 px-4 py-4 hover:bg-s2 transition-colors border-b border-white/[.06]"
-            >
-                <img src="/brand/logo-mark.svg" alt="Nimuli" class="w-7 h-7 flex-shrink-0">
-                <div class="flex-1 text-left min-w-0">
-                    <div class="text-sm font-bold tracking-tight text-accent-gradient">nimuli</div>
-                    @if($workspace)
-                        <div class="text-xs text-t2 truncate mt-0.5">{{ $workspace->name }}</div>
-                    @else
-                        <div class="text-xs text-t2">Select workspace</div>
-                    @endif
-                </div>
-                <svg class="w-4 h-4 text-t3 flex-shrink-0 transition-transform" :class="wsOpen && 'rotate-180'" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6l4 4 4-4"/>
-                </svg>
-            </button>
+            <div class="flex items-stretch border-b border-white/[.06]">
+                <button
+                    @click="wsOpen = !wsOpen"
+                    class="flex-1 flex items-center gap-3 px-4 py-4 hover:bg-s2 transition-colors min-w-0"
+                >
+                    <img src="/brand/logo-mark.svg" alt="Nimuli" class="w-7 h-7 flex-shrink-0">
+                    <div class="flex-1 text-left min-w-0">
+                        <div class="text-sm font-bold tracking-tight text-accent-gradient">nimuli</div>
+                        @if($workspace)
+                            <div class="text-xs text-t2 truncate mt-0.5">{{ $workspace->name }}</div>
+                        @else
+                            <div class="text-xs text-t2">Select workspace</div>
+                        @endif
+                    </div>
+                    <svg class="w-4 h-4 text-t3 flex-shrink-0 transition-transform" :class="wsOpen && 'rotate-180'" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6l4 4 4-4"/>
+                    </svg>
+                </button>
+                <!-- Mobile-only close button -->
+                <button @click="$store.sidebar.closeMobile()" class="md:hidden flex items-center px-3 text-t3 hover:text-t1 border-l border-white/[.06] transition-colors" title="Close sidebar">
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l8 8M6 14L14 6"/>
+                    </svg>
+                </button>
+            </div>
 
             <!-- Workspace Switcher Dropdown -->
             <div
@@ -239,8 +247,8 @@
         @endforeach
     </nav>
 
-    <!-- Collapse Toggle -->
-    <div class="flex-shrink-0 border-t border-white/[.06] px-2 py-2">
+    <!-- Collapse Toggle (desktop only) -->
+    <div class="hidden md:block flex-shrink-0 border-t border-white/[.06] px-2 py-2">
         <button
             @click="$store.sidebar.toggle()"
             :title="$store.sidebar.collapsed ? 'Expand sidebar' : 'Collapse sidebar'"