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

fix: make desktop nav horizontally scrollable on narrow screens

Browse Source
This commit is contained in:
Fringg
2026-03-09 21:05:36 +03:00
parent c8ec221111
commit ab7d1b7f25
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -317,14 +317,14 @@ export function AppShell({ children }: AppShellProps) {
</Link> </Link>
{/* Center Navigation */} {/* Center Navigation */}
<nav className="flex items-center justify-center gap-1"> <nav className="scrollbar-hide flex items-center gap-1 overflow-x-auto">
{desktopNavItems.map((item) => ( {desktopNavItems.map((item) => (
<Link <Link
key={item.path} key={item.path}
to={item.path} to={item.path}
onClick={handleNavClick} onClick={handleNavClick}
className={cn( className={cn(
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors', 'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
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',
@@ -339,7 +339,7 @@ export function AppShell({ children }: AppShellProps) {
to="/referral" to="/referral"
onClick={handleNavClick} onClick={handleNavClick}
className={cn( className={cn(
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors', 'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
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',
@@ -354,7 +354,7 @@ export function AppShell({ children }: AppShellProps) {
to="/gift" to="/gift"
onClick={handleNavClick} onClick={handleNavClick}
className={cn( className={cn(
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors', 'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
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',
@@ -367,12 +367,12 @@ export function AppShell({ children }: AppShellProps) {
{isAdmin && ( {isAdmin && (
<> <>
{/* Separator before admin */} {/* Separator before admin */}
<div className="mx-2 h-5 w-px bg-dark-700" /> <div className="mx-2 h-5 w-px shrink-0 bg-dark-700" />
<Link <Link
to="/admin" to="/admin"
onClick={handleNavClick} onClick={handleNavClick}
className={cn( className={cn(
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors', 'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors',
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',