diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 4eef427..ad9e7c8 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -147,7 +147,7 @@ export function AppShell({ children }: AppShellProps) { onClick={handleNavClick} aria-label={label} className={cn( - 'relative flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors duration-200', + 'relative flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium transition-colors duration-200', active ? admin ? 'text-warning-400' @@ -167,7 +167,7 @@ export function AppShell({ children }: AppShellProps) { transition={{ type: 'spring', stiffness: 500, damping: 35 }} /> )} - + {label} ); @@ -188,9 +188,9 @@ export function AppShell({ children }: AppShellProps) { {/* Desktop Header */} - + {/* Logo */} - + {appName} - {/* Center Navigation */} - + {/* Navigation — labels always visible, all items shown, no scroll/shrink */} + {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))} {isAdmin && ( <> @@ -225,8 +225,8 @@ export function AppShell({ children }: AppShellProps) { )} - {/* Right side actions */} - + {/* Right side actions — pinned right, never shrink */} + { haptic.impact('light'); @@ -234,7 +234,7 @@ export function AppShell({ children }: AppShellProps) { }} className={cn( 'rounded-xl border border-dark-700/50 bg-dark-800/50 p-2 text-dark-400 transition-colors duration-200 hover:bg-dark-700 hover:text-accent-400', - !canToggleTheme && 'pointer-events-none invisible', + !canToggleTheme && 'hidden', )} aria-label={ isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'