Fixing Mobile Navigation in the Dashboard Header (MOB-23)

Release: v0.1.28 · Category: Component Patterns

Background

On small-screen viewports, the dashboard header uses a md:hidden section that was designed to replace the full desktop navigation bar. However, this mobile header only rendered two elements — a logo link and a UserButton — leaving mobile users with no way to reach any navigation destinations from the dashboard.

This was structurally identical to the problems addressed in MOB-06 and MOB-10, where navigation was stripped entirely rather than adapted for the mobile form factor.

The Problem

[Logo]                    [UserButton]

The mobile header contained no affordance for accessing the sidebar or any navigation links. Users on phones or narrow viewports were effectively stranded unless they knew an alternative route.

The Fix

The mobile header in src/app/dashboard/layout.tsx has been restructured to include a hamburger menu button. This button triggers the sidebar drawer (co-implemented with the MOB-06 sidebar drawer fix), giving mobile users access to the full navigation tree.

Updated mobile header structure:

// src/app/dashboard/layout.tsx
<header className="md:hidden ...">
  {/* Logo */}
  <Link href="/dashboard">...</Link>

  {/* Hamburger trigger */}
  <button className="md:hidden h-9 w-9 flex items-center justify-center">
    <Menu className="size-5" />
  </button>

  {/* User button */}
  <UserButton />
</header>

The <Menu /> icon (9×9 tap target) opens the sidebar drawer, ensuring mobile users can reach all navigation destinations without needing to reach for a desktop-sized layout.

Affected File

File	Change
src/app/dashboard/layout.tsx	Added hamburger button to mobile header; wired to sidebar drawer from MOB-06

Related Issues

• MOB-06 — Sidebar drawer implementation for mobile
• MOB-10 — Earlier responsive navigation fix (same structural pattern)
• MOB-23 — This release