From 17957fbb4c946120e4739ef7a39ca3e0721db853 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 9 Oct 2026 13:50:07 +0200
Subject: [PATCH] feat(ui): restyle sidebar footer user menu and toggle icon

Put the user menu above the toggle in the collapsed sidebar, make the
user menu a full-width 3D button with rounded corners, and use a new
sidebar toggle icon everywhere.
---
 resources/views/components/navbar.blade.php        |  6 +++---
 resources/views/components/top-user-menu.blade.php | 14 +++++++-------
 resources/views/layouts/app.blade.php              |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 13ae6277f4..361b7fc701 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -261,13 +261,13 @@
         @if ($deploymentsIndicator)
             <livewire:deployments-indicator variant="sidebar" />
         @endif
-        <div class="flex items-center gap-1" :class="collapsed ? 'flex-col-reverse justify-center' : 'justify-between'">
+        <div class="flex items-center gap-1" :class="collapsed ? 'flex-col justify-center' : 'justify-between'">
             <x-top-user-menu sidebar />
             <button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
                 class="menu-item sidebar-toggle w-8 shrink-0 justify-center px-0">
                 <svg class="menu-item-icon" viewBox="0 0 24 24" fill="none">
-                    <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.6" />
-                    <path d="M9 4v16" stroke="currentColor" stroke-width="1.6" />
+                    <rect x="3" y="5" width="18" height="14" rx="4" stroke="currentColor" stroke-width="1.6" />
+                    <path d="M16 9v6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                 </svg>
             </button>
         </div>
diff --git a/resources/views/components/top-user-menu.blade.php b/resources/views/components/top-user-menu.blade.php
index b3559970bb..1e1770a251 100644
--- a/resources/views/components/top-user-menu.blade.php
+++ b/resources/views/components/top-user-menu.blade.php
@@ -8,7 +8,7 @@
     $userEmail = $user?->email ?? '';
     $userInitial = strtoupper(mb_substr($user?->name ?: ($user?->email ?: 'A'), 0, 1));
 @endphp
-<div @class(['relative', 'min-w-0' => $sidebar]) x-data="{
+<div @class(['relative', 'min-w-0 flex-1' => $sidebar]) x-data="{
     open: false,
     appearanceOpen: false,
     avatarUrl: @js($user?->avatar_path ? profile_avatar_url($user) : null),
@@ -23,10 +23,10 @@
     @click.outside="closePanel()">
     <button type="button" @click="open ? closePanel() : openPanel()"
         title="{{ $userName }}" aria-label="Account menu for {{ $userName }}"
-        @if ($sidebar) :class="collapsed && 'w-8 justify-center px-0'" @endif
+        @if ($sidebar) :class="collapsed ? 'w-8 px-0' : 'w-full'" @endif
         @class([
-            'flex h-8 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2 shadow-sm transition-colors hover:bg-neutral-200 dark:border-white/[0.08] dark:bg-white/[0.06] dark:hover:bg-white/[0.1]',
-            'max-w-36' => $sidebar,
+            'button rounded-lg px-2 normal-case',
+            'min-w-0' => $sidebar,
         ])>
         <img x-cloak x-show="avatarUrl" :src="avatarUrl" alt="{{ $userName }}"
             class="size-5 shrink-0 rounded-full object-cover">
@@ -35,7 +35,7 @@
             {{ $userInitial }}
         </span>
         @if ($sidebar)
-            <span class="min-w-0 truncate text-xs font-medium" :class="collapsed && 'hidden'">{{ $userName }}</span>
+            <span class="min-w-0 flex-1 truncate text-left text-xs font-medium" :class="collapsed && 'hidden'">{{ $userName }}</span>
         @endif
         <svg class="size-3.5 shrink-0 text-neutral-400 dark:text-fg-faint transition-transform"
             :class="[open && 'rotate-180', {{ $sidebar ? "collapsed && 'hidden'" : 'false' }}]"
@@ -88,8 +88,8 @@
             :aria-pressed="autoCollapse" title="Collapse the sidebar on pages that have a settings menu">
             <span class="flex items-center gap-2">
                 <svg class="size-4 opacity-80" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                    <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.6" />
-                    <path d="M9 4v16" stroke="currentColor" stroke-width="1.6" />
+                    <rect x="3" y="5" width="18" height="14" rx="4" stroke="currentColor" stroke-width="1.6" />
+                    <path d="M16 9v6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                 </svg>
                 Auto-collapse sidebar
             </span>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9982faf984..dc7c1e3e88 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -173,8 +173,8 @@
                         class="-mr-1 flex size-9 items-center justify-center rounded-md text-neutral-500 transition-transform duration-100 ease-out hover:bg-neutral-100 hover:text-black active:scale-90 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
                         <span class="sr-only">Open sidebar</span>
                         <svg class="size-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                            <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.6" />
-                            <path d="M9 4v16" stroke="currentColor" stroke-width="1.6" />
+                            <rect x="3" y="5" width="18" height="14" rx="4" stroke="currentColor" stroke-width="1.6" />
+                            <path d="M16 9v6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                         </svg>
                     </button>
                 </div>