feat(web): app-like mobile dashboard — bottom tab bar, minimal top
All checks were successful
Deploy to Production / deploy (push) Successful in 52s

Top header on mobile was cramped: Logo + 5 icon-only nav buttons + avatar
crammed into a 48px-tall row. Felt like a desktop nav shrunk down.

Pivot to native-mobile-app pattern:
- Top mobile: just Logo (left) + UserMenu avatar (right). Desktop top nav
  is `hidden sm:flex` so it disappears on phones.
- Bottom: full tab bar replacing the single-button MobileActionBar.
  Five destinations: Overview · Servers · Create (FAB-style center) ·
  Market · Settings.
- "Create" is a raised FAB-style button (round accent fill, -mt-3 to
  overlap the bar border) — same prominent-action pattern as Instagram /
  Notion mobile.
- Active tab gets accent color + aria-current=page.
- Audit demoted from primary nav on mobile (low frequency); still
  reachable via direct /audit URL.

Desktop unchanged — top nav stays.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
2026-05-25 23:15:44 +02:00
parent a8e6f4fabd
commit f80bd8afbe
2 changed files with 96 additions and 21 deletions

View File

@@ -12,7 +12,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<div className="mx-auto flex h-12 max-w-7xl items-center justify-between gap-2 px-4 sm:px-6">
<div className="flex min-w-0 items-center gap-2 sm:gap-6">
<Logo />
<nav className="flex items-center gap-0.5 sm:gap-1">
{/* Desktop nav — on mobile this is hidden and destinations live
in the bottom MobileActionBar tab-bar instead. */}
<nav className="hidden items-center gap-0.5 sm:flex sm:gap-1">
<NavLink href="/dashboard" icon={<LayoutGrid size={13} />}>
Overview
</NavLink>