[R-05] Hamburger menu missing navigation items

[vmorps]

[R-05] Hamburger Menu Missing Navigation Items

Severity: P0 — Production-blocking
Sprint: 1 (ship immediately)
Component: Navbar
Spec: design/specs/responsive-layout-fixes.md § R-05
Mockups: design/specs/responsive-layout-mocks.html — Hamburger icon at top-right

---

Current Behavior

When the hamburger menu is tapped on mobile, not all five primary navigation items are displayed. The expected items are:

1. Docs
2. Quickstart
3. SDKs
4. Specification
5. Community

Additionally, the GitHub link (position: "right") may not appear in the mobile sidebar.

Root Cause Analysis

1. Community uses href (external link) — Docusaurus may filter external-only links from the mobile sidebar
2. Right-positioned items excluded — GitHub is position: "right" and may not appear in the mobile hamburger drawer
3. CSS interference — Custom 3-column navbar layout uses position: absolute which may interfere with sidebar toggle behavior
4. Sidebar replacing nav items — Hamburger may show docs sidebar instead of navbar items depending on current page

Expected Behavior

The mobile hamburger menu must display all 5 nav items plus the GitHub link:

┌─────────────────────────┐
│ ✕                 🌙/☀️  │  ← Close button + theme toggle
├─────────────────────────┤
│  Docs                 → │  ← /introduction
│  Quickstart           → │  ← /quickstart
│  SDKs                 → │  ← /sdks
│  Specification        → │  ← /spec
│  Community            ↗ │  ← GitHub Discussions
├─────────────────────────┤
│  �� GitHub             ↗ │  ← github.com/opentdf
└─────────────────────────┘

Touch targets: min 44px height, full-width tap area

File(s) Impacted

• docusaurus.config.ts
• src/css/custom.css
• Possibly swizzled Navbar component

Implementation Approach

Option A (Recommended): CSS + Config adjustments

1. Verify all 5 items appear in the mobile sidebar by inspecting rendered DOM
2. If items are missing, move Community from href to a Docusaurus-native to link, or confirm the version handles href items
3. For GitHub: duplicate with position: "left" but hidden on desktop via CSS, OR swizzle NavbarMobileSidebar

Option B: Swizzle NavbarMobileSidebar

1. Eject via npx docusaurus swizzle @docusaurus/theme-classic NavbarMobileSidebar
2. Customize to render all 5 navbar items + GitHub link
3. Style with mobile-friendly touch targets

Acceptance Criteria

• Tapping the hamburger displays all 5 primary nav items: Docs, Quickstart, SDKs, Specification, Community
• GitHub link is accessible from the mobile menu
• Theme toggle (light/dark) is accessible from the mobile menu
• Each item has a minimum 44px touch target height
• External links are visually distinguished from internal links
• Menu closes when an item is tapped
• Menu closes when tapping outside the menu area

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.