From 5f9bbb97bd3350883181ab17c8a08522e6e1e598 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 13:00:20 +0200
Subject: [PATCH] fix(sidebar): replace floating circular collapse button with
 blended row

User feedback: the circular toggle floating off the sidebar's right
edge looked tacked-on. Replaced with a flush full-width row above the
user footer (right-aligned 'Collapse <' chip when expanded; centered
chevron when collapsed). Same nav-item hover treatment so it merges
visually with the sidebar palette. The <aside> no longer needs to
host an overhanging button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/sidebar.tsx | 41 +++++++++++++++++--------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index e1b482b..ea849d9 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -186,6 +186,7 @@ function SidebarContent({
   hasMarinaAccess,
   hasResidentialAccess,
   user,
+  onToggleCollapse,
 }: {
   collapsed: boolean;
   portSlug: string | undefined;
@@ -194,6 +195,8 @@ function SidebarContent({
   hasMarinaAccess: boolean;
   hasResidentialAccess: boolean;
   user?: SidebarProps['user'];
+  /** When provided, renders the collapse toggle row above the user footer (desktop). */
+  onToggleCollapse?: () => void;
 }) {
   const pathname = usePathname();
   const [adminExpanded, setAdminExpanded] = useState(true);
@@ -274,6 +277,25 @@ function SidebarContent({
           </nav>
         </ScrollArea>
 
+        {/* Collapse toggle (desktop only) */}
+        {onToggleCollapse && (
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            className={cn(
+              'flex items-center w-full border-t border-[#474e66] px-3 py-2',
+              'text-[#83aab1] hover:bg-[#171f35] hover:text-white transition-colors',
+              collapsed ? 'justify-center' : 'justify-end gap-2',
+            )}
+          >
+            {!collapsed && (
+              <span className="text-[10px] font-medium uppercase tracking-[0.12em]">Collapse</span>
+            )}
+            {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+          </button>
+        )}
+
         {/* User footer */}
         <div className={cn('border-t border-[#474e66] p-3', collapsed && 'flex justify-center')}>
           {collapsed ? (
@@ -351,25 +373,8 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
           hasMarinaAccess={hasMarinaAccess}
           hasResidentialAccess={hasResidentialAccess}
           user={user}
+          onToggleCollapse={toggleSidebar}
         />
-
-        {/* Collapse toggle */}
-        <button
-          onClick={toggleSidebar}
-          className={cn(
-            'absolute top-1/2 -translate-y-1/2 -right-3 z-10',
-            'w-6 h-6 rounded-full bg-[#1e2844] border border-[#474e66]',
-            'flex items-center justify-center text-[#cdcfd6]',
-            'hover:bg-[#3a7bc8] hover:border-[#3a7bc8] hover:text-white transition-colors',
-          )}
-          aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          {sidebarCollapsed ? (
-            <ChevronRight className="w-3 h-3" />
-          ) : (
-            <ChevronLeft className="w-3 h-3" />
-          )}
-        </button>
       </aside>
 
       {/* Mobile drawer */}