etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: desktop nav expand-on-hover with larger icons

Browse Source 
Icons enlarged to 18px, padding increased. On hover each button
smoothly expands to reveal its label with opacity and max-width
transition (200ms). Uses group/group-hover pattern.
This commit is contained in:
Fringg
2026-03-11 01:52:29 +03:00
parent f0777f0b5d
commit 8dab6dc8fb
1 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layout/AppShell/AppShell.tsx
View File

@@ -317,72 +317,76 @@ export function AppShell({ children }: AppShellProps) {
</Link> </Link>
{/* Center Navigation */} {/* Center Navigation */}
<nav className="flex min-w-0 items-center gap-0.5"> <nav className="flex min-w-0 items-center gap-1">
{desktopNavItems.map((item) => ( {desktopNavItems.map((item) => (
<Link <Link
key={item.path} key={item.path}
to={item.path} to={item.path}
onClick={handleNavClick} onClick={handleNavClick}
title={item.label}
className={cn( className={cn(
'flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive(item.path) isActive(item.path)
? 'bg-dark-800 text-dark-50' ? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200', : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)} )}
> >
<item.icon className="h-3.5 w-3.5 shrink-0" /> <item.icon className="h-[18px] w-[18px] shrink-0" />
<span className="sr-only">{item.label}</span> <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{item.label}
</span>
</Link> </Link>
))} ))}
{referralEnabled && ( {referralEnabled && (
<Link <Link
to="/referral" to="/referral"
onClick={handleNavClick} onClick={handleNavClick}
title={t('nav.referral')}
className={cn( className={cn(
'flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive('/referral') isActive('/referral')
? 'bg-dark-800 text-dark-50' ? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200', : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)} )}
> >
<UsersIcon className="h-3.5 w-3.5 shrink-0" /> <UsersIcon className="h-[18px] w-[18px] shrink-0" />
<span className="sr-only">{t('nav.referral')}</span> <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('nav.referral')}
</span>
</Link> </Link>
)} )}
{giftEnabled && ( {giftEnabled && (
<Link <Link
to="/gift" to="/gift"
onClick={handleNavClick} onClick={handleNavClick}
title={t('nav.gift')}
className={cn( className={cn(
'flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
isActive('/gift') isActive('/gift')
? 'bg-dark-800 text-dark-50' ? 'bg-dark-800 text-dark-50'
: 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200', : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
)} )}
> >
<GiftIcon className="h-3.5 w-3.5 shrink-0" /> <GiftIcon className="h-[18px] w-[18px] shrink-0" />
<span className="sr-only">{t('nav.gift')}</span> <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('nav.gift')}
</span>
</Link> </Link>
)} )}
{isAdmin && ( {isAdmin && (
<> <>
<div className="mx-1 h-4 w-px shrink-0 bg-dark-700" /> <div className="mx-1 h-5 w-px shrink-0 bg-dark-700" />
<Link <Link
to="/admin" to="/admin"
onClick={handleNavClick} onClick={handleNavClick}
title={t('admin.nav.title')}
className={cn( className={cn(
'flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
location.pathname.startsWith('/admin') location.pathname.startsWith('/admin')
? 'bg-warning-500/10 text-warning-400' ? 'bg-warning-500/10 text-warning-400'
: 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400', : 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400',
)} )}
> >
<ShieldIcon className="h-3.5 w-3.5 shrink-0" /> <ShieldIcon className="h-[18px] w-[18px] shrink-0" />
<span className="sr-only">{t('admin.nav.title')}</span> <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
{t('admin.nav.title')}
</span>
</Link> </Link>
</> </>
)} )}