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(desktop-header): full-width row so all nav items fit (no overflow/overlap)

Browse Source 
The nav was centered inside a max-w-6xl grid column; 8 icon+label items were
wider than that column, so the centered overflow spilled LEFT over the logo
(ZeroPing's tail poked out from under 'Главная'). Switch to a full-width flex
row — logo (shrink-0) | nav | controls (shrink-0, pinned right via ml-auto) —
widen the container cap to 1600px, slightly compact the items, and drop the
invisible theme toggle from layout when it's not toggleable. Icons + labels
all stay visible: no scroll, no shrink, no overlap.
This commit is contained in:
c0mrade
2026-06-05 00:32:32 +03:00
parent e4cd975d9c
commit 864aeaf600
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -147,7 +147,7 @@ export function AppShell({ children }: AppShellProps) {
onClick={handleNavClick} onClick={handleNavClick}
aria-label={label} aria-label={label}
className={cn( 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 active
? admin ? admin
? 'text-warning-400' ? 'text-warning-400'
@@ -167,7 +167,7 @@ export function AppShell({ children }: AppShellProps) {
transition={{ type: 'spring', stiffness: 500, damping: 35 }} transition={{ type: 'spring', stiffness: 500, damping: 35 }}
/> />
)} )}
<Icon className="relative h-[17px] w-[17px] shrink-0" /> <Icon className="relative h-4 w-4 shrink-0" />
<span className="relative whitespace-nowrap">{label}</span> <span className="relative whitespace-nowrap">{label}</span>
</Link> </Link>
); );
@@ -188,9 +188,9 @@ export function AppShell({ children }: AppShellProps) {
{/* Desktop Header */} {/* Desktop Header */}
<header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/95 lg:block"> <header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/95 lg:block">
<div className="mx-auto grid h-14 max-w-6xl grid-cols-[auto_1fr_auto] items-center gap-4 px-6"> <div className="mx-auto flex h-14 max-w-[1600px] items-center gap-5 px-6">
{/* Logo */} {/* Logo */}
<Link to="/" className="flex items-center gap-2.5" onClick={handleNavClick}> <Link to="/" className="flex shrink-0 items-center gap-2.5" onClick={handleNavClick}>
<div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-dark-800"> <div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-dark-800">
<span <span
className={cn( className={cn(
@@ -214,8 +214,8 @@ export function AppShell({ children }: AppShellProps) {
<span className="text-base font-semibold text-dark-100">{appName}</span> <span className="text-base font-semibold text-dark-100">{appName}</span>
</Link> </Link>
{/* Center Navigation */} {/* Navigation — labels always visible, all items shown, no scroll/shrink */}
<nav className="flex min-w-0 items-center justify-center gap-0.5"> <nav className="flex items-center gap-0.5">
{desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))} {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))}
{isAdmin && ( {isAdmin && (
<> <>
@@ -225,8 +225,8 @@ export function AppShell({ children }: AppShellProps) {
)} )}
</nav> </nav>
{/* Right side actions */} {/* Right side actions — pinned right, never shrink */}
<div className="flex items-center justify-end gap-2"> <div className="ml-auto flex shrink-0 items-center gap-2">
<button <button
onClick={() => { onClick={() => {
haptic.impact('light'); haptic.impact('light');
@@ -234,7 +234,7 @@ export function AppShell({ children }: AppShellProps) {
}} }}
className={cn( 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', '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={ aria-label={
isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode' isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'