From 034fee371c7dc5df62e40e1cc10918102ff4c6d9 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 22:31:51 -0500
Subject: [PATCH] fix: keep brand text visible on sidebar collapse, hide
 sub-items until hover

- TopBar: always show "ResolutionFlow" text regardless of sidebar state
- NavItem: sub-items (Troubleshooting, Projects) hidden by default,
  revealed on hover or when a child route is active

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/NavItem.tsx | 11 ++++++++---
 frontend/src/components/layout/TopBar.tsx  | 13 ++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx
index 7e04bef6..1225eba2 100644
--- a/frontend/src/components/layout/NavItem.tsx
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -58,7 +58,7 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
   }
 
   return (
-    <div>
+    <div className="group/nav">
       <Link
         to={href}
         className={cn(
@@ -90,9 +90,14 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
         )}
       </Link>
 
-      {/* Sub-items */}
+      {/* Sub-items — visible on hover or when a child is active */}
       {children && children.length > 0 && (
-        <div className="mt-0.5 space-y-0.5">
+        <div className={cn(
+          'mt-0.5 space-y-0.5 overflow-hidden transition-all duration-200',
+          isActive || activeChild
+            ? 'max-h-40 opacity-100'
+            : 'max-h-0 opacity-0 group-hover/nav:max-h-40 group-hover/nav:opacity-100'
+        )}>
           {children.map(child => {
             const childActive = fullPath === child.href || fullPath.startsWith(child.href + '&')
             return (
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index eca8ab1b..fbb00762 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -3,7 +3,6 @@ import { Link, useNavigate } from 'react-router-dom'
 import { Search, Zap, LogOut, User, Shield, Settings } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
-import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { CommandPalette } from './CommandPalette'
 import { QuickLaunch } from './QuickLaunch'
@@ -14,7 +13,6 @@ export function TopBar() {
   const navigate = useNavigate()
   const { user, logout } = useAuthStore()
   const { effectiveRole, isSuperAdmin } = usePermissions()
-  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
 
   const [userMenuOpen, setUserMenuOpen] = useState(false)
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
@@ -61,17 +59,14 @@ export function TopBar() {
         <Link
           to="/"
           className="flex items-center gap-2.5 pr-4 transition-all duration-200"
-          style={{ width: sidebarCollapsed ? '32px' : 'calc(260px - 40px)' }}
         >
           <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
             <BrandLogo size="sm" className="h-4 w-4" />
           </div>
-          {!sidebarCollapsed && (
-            <span className="text-sm font-heading font-bold tracking-tight">
-              <span className="text-foreground">Resolution</span>
-              <span className="text-gradient-brand">Flow</span>
-            </span>
-          )}
+          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
+            <span className="text-foreground">Resolution</span>
+            <span className="text-gradient-brand">Flow</span>
+          </span>
         </Link>
 
         {/* Spacer - push search to center */}