Mobile Navigation: Hamburger Menu in Dashboard

Version introduced: 0.1.26

Overview

Prior to v0.1.26, the dashboard header on mobile devices displayed only a logo and an avatar. There was no control to open the navigation drawer, making it impossible for users on small screens to discover or switch between dashboard sections.

This release adds a hamburger menu button to the mobile header, completing the mobile navigation pattern alongside the drawer introduced in MOB-06.

What was added

A <Menu> icon button from lucide-react has been added to the mobile-only (md:hidden) section of the dashboard header in src/app/dashboard/layout.tsx.

Button specification

Property	Value
Icon	<Menu className="size-5" /> (lucide-react)
Container classes	h-9 w-9 flex items-center justify-center rounded-lg
Visibility	Mobile only — hidden on md: breakpoint and above
Behaviour	Opens the mobile navigation drawer (MOB-06)

How it works

1. On screens narrower than the md breakpoint, the dashboard header renders a hamburger menu button on the left (or right) side alongside the logo and avatar.
2. Tapping the button fires the drawer open handler, sliding in the full navigation menu.
3. The desktop layout is unchanged — the sidebar navigation remains visible at md: and above.

Related

• MOB-06 — Mobile navigation drawer implementation (the panel that the hamburger button opens).
• src/app/dashboard/layout.tsx — File where both the mobile header and this button are defined.