fix: move header nav to separate row

Reviewed-on: #15

apps/frontend/src/components/Layout/Header.tsx

@@ -58,39 +58,6 @@ export function Header() {
           </div>
         </Link>
 
-        <nav className="app-header__nav">
-          {links.map((l) => (
-            <NavLink
-              key={l.to}
-              to={l.to}
-              end={l.end}
-              className={({ isActive }) =>
-                cn(
-                  'app-header__nav-link',
-                  isActive && 'app-header__nav-link--active',
-                )
-              }
-            >
-              <l.icon className="h-4 w-4" />
-              {t(l.label)}
-            </NavLink>
-          ))}
-          {friend.data && (
-            <NavLink
-              to={`/u/${friend.data.slug}`}
-              className={({ isActive }) =>
-                cn(
-                  'app-header__nav-link',
-                  isActive && 'app-header__nav-link--active',
-                )
-              }
-            >
-              <Users className="h-4 w-4" />
-              {t('header.friendWishes', { name: friend.data.displayName })}
-            </NavLink>
-          )}
-        </nav>
-
         <div className="app-header__actions">
           <LanguageSwitcher />
           <Button
@@ -119,6 +86,39 @@ export function Header() {
           </Button>
         </div>
       </div>
+
+      <nav className="app-header__nav">
+        {links.map((l) => (
+          <NavLink
+            key={l.to}
+            to={l.to}
+            end={l.end}
+            className={({ isActive }) =>
+              cn(
+                'app-header__nav-link',
+                isActive && 'app-header__nav-link--active',
+              )
+            }
+          >
+            <l.icon className="h-4 w-4" />
+            {t(l.label)}
+          </NavLink>
+        ))}
+        {friend.data && (
+          <NavLink
+            to={`/u/${friend.data.slug}`}
+            className={({ isActive }) =>
+              cn(
+                'app-header__nav-link',
+                isActive && 'app-header__nav-link--active',
+              )
+            }
+          >
+            <Users className="h-4 w-4" />
+            {t('header.friendWishes', { name: friend.data.displayName })}
+          </NavLink>
+        )}
+      </nav>
     </header>
   );
 }

apps/frontend/src/styles/global.css

@@ -40,7 +40,7 @@
     @apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
   }
   .app-header__inner {
-    @apply grid grid-cols-1 items-center gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur lg:grid-cols-[auto_minmax(0,1fr)_auto];
+    @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur;
   }
   .app-header__brand {
     @apply flex min-w-0 items-center gap-2;
@@ -55,7 +55,7 @@
     @apply truncate text-xs text-muted;
   }
   .app-header__nav {
-    @apply flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap lg:justify-center;
+    @apply mt-3 flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap rounded-lg border border-border bg-surface/80 px-4 py-2 backdrop-blur;
   }
   .app-header__nav-link {
     @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-ink transition-colors hover:bg-ink/5;
@@ -64,7 +64,7 @@
     @apply bg-primary text-primary-foreground shadow-card hover:bg-primary;
   }
   .app-header__actions {
-    @apply flex shrink-0 items-center gap-1 justify-self-start whitespace-nowrap lg:justify-self-end;
+    @apply flex shrink-0 items-center gap-1 whitespace-nowrap;
   }
   .app-header__action {
     @apply shrink-0;