boban
/
nimuli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(bug-2): mobile sidebar close button + desktop-only collapse toggle 

- 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>
main
boban 2026-05-16 19:07:02 +02:00
parent 90bf5a0c53
commit fbb57eec81
1 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/components/sidebar.blade.php
View File

@ -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'"