Mobile Navigation Now Accessible — MOB-06 Fix

Version: v0.1.58
Category: Layout
Affected file: src/app/dashboard/layout.tsx

The Problem

Prior to v0.1.58, the dashboard was essentially non-navigable on mobile devices. The main sidebar was styled with Tailwind's hidden md:flex utility, which hides it entirely on screens narrower than 768px (the md breakpoint).

The mobile header that replaced it at small breakpoints rendered only a logo and a user avatar. There was no hamburger menu, no drawer, and no navigation links of any kind. All 10 navigation items in the dashboard were completely unreachable on mobile:

Dashboard
People & Entities
Match Review
Sanctions Lists
List Changes
Adverse Media
Billing
Docs
Feedback
Settings

For any compliance team member accessing the platform from a phone or small tablet, the dashboard was a dead end.

The Fix

v0.1.58 introduces a mobile navigation drawer — a slide-in overlay sidebar triggered by a hamburger button in the mobile header.

How it works

Hamburger button in the mobile header — A <Menu> icon (from lucide-react) is now displayed in the top header bar on screens below the md breakpoint (md:hidden is applied to keep it off desktop). Tapping this button opens the navigation drawer.
Slide-in overlay drawer — When opened, a full-height panel slides in from the side, rendering all navigation links in the same structure as the desktop sidebar. The overlay backdrop (fixed inset-0 z-40 bg-background/80) dims the page content behind it.
State management — Open/close state is managed locally in the layout component:
```
const [mobileNavOpen, setMobileNavOpen] = useState(false);
```
Dismissal — The drawer closes when a navigation link is tapped or when the backdrop is tapped, returning the user to the page content.

Key implementation details

// Hamburger button — visible only on mobile
<button
  onClick={() => setMobileNavOpen(true)}
  className="md:hidden"
  aria-label="Open navigation"
>
  <Menu />
</button>

// Overlay drawer — rendered when mobileNavOpen is true
{mobileNavOpen && (
  <div className="fixed inset-0 z-40 bg-background/80 md:hidden">
    {/* Navigation links */}
  </div>
)}

Impact

This fix restores full navigability of the dashboard on mobile devices. Compliance team members can now access all areas of the platform — including Match Review, Sanctions Lists, and Adverse Media — from any screen size.