etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent header layout shift and unify action button styles

Browse Source 
- Switch desktop header from flex justify-between to CSS grid (auto/1fr/auto)
  so center nav stays fixed regardless of right-side button count
- Update theme toggle and logout buttons to match bell/language style
  (rounded-xl border bg-dark-800/50)
This commit is contained in:
c0mrade
2026-02-06 02:47:07 +03:00
parent f54ad4eb1f
commit d900c6f152
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -268,7 +268,7 @@ 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/80 backdrop-blur-xl lg:block"> <header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/80 backdrop-blur-xl lg:block">
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-6"> <div className="mx-auto grid h-14 max-w-6xl grid-cols-[auto_1fr_auto] items-center gap-4 px-6">
{/* Logo */} {/* Logo */}
<Link to="/" className="flex items-center gap-2.5" onClick={handleNavClick}> <Link to="/" className="flex 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">
@@ -295,7 +295,7 @@ export function AppShell({ children }: AppShellProps) {
</Link> </Link>
{/* Center Navigation */} {/* Center Navigation */}
<nav className="flex items-center gap-1"> <nav className="flex items-center justify-center gap-1">
{desktopNavItems.map((item) => ( {desktopNavItems.map((item) => (
<Link <Link
key={item.path} key={item.path}
@@ -349,14 +349,14 @@ export function AppShell({ children }: AppShellProps) {
</nav> </nav>
{/* Right side actions */} {/* Right side actions */}
<div className="flex items-center gap-2"> <div className="flex items-center justify-end gap-2">
{canToggleTheme && ( {canToggleTheme && (
<button <button
onClick={() => { onClick={() => {
haptic.impact('light'); haptic.impact('light');
toggleTheme(); toggleTheme();
}} }}
className="flex h-8 w-8 items-center justify-center rounded-lg text-dark-400 transition-colors hover:bg-dark-800/50 hover:text-dark-200" className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-2 text-dark-400 transition-all duration-200 hover:bg-dark-700 hover:text-accent-400"
title={isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'} title={isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'}
> >
{isDark ? <MoonIcon className="h-4 w-4" /> : <SunIcon className="h-4 w-4" />} {isDark ? <MoonIcon className="h-4 w-4" /> : <SunIcon className="h-4 w-4" />}
@@ -369,7 +369,7 @@ export function AppShell({ children }: AppShellProps) {
haptic.impact('light'); haptic.impact('light');
logout(); logout();
}} }}
className="flex h-8 w-8 items-center justify-center rounded-lg text-dark-400 transition-colors hover:bg-dark-800/50 hover:text-dark-200" className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-2 text-dark-400 transition-all duration-200 hover:bg-dark-700 hover:text-accent-400"
title={t('nav.logout')} title={t('nav.logout')}
> >
<LogoutIcon className="h-4 w-4" /> <LogoutIcon className="h-4 w-4" />