[cristim]

Summary

• Add a hamburger button to the topbar that opens the sidebar as a slide-in drawer on viewports at or below 768px (the project's existing mobile breakpoint).
• The desktop layout is untouched; the hamburger is display: none above 768px.
• Topbar filter chips wrap to a second row on mobile instead of overflowing.

Design

Breakpoint: 768px (matches the existing @media (max-width: 768px) in responsive.css).

Open: body.sidebar-open class added; sidebar translates from translateX(-100%) to translateX(0) with a 250ms ease transition; translucent overlay fades in behind the drawer.

Close: overlay click, Escape key, or any unmodified sidebar link click removes .sidebar-open and returns focus to the hamburger button.

Scroll lock: body.sidebar-open { overflow: hidden } prevents the page from scrolling while the drawer is open.

Filter chips: .app-topbar-filters gains flex-wrap: wrap on mobile so chips flow to a second row rather than overflowing or being clipped.

Accessibility

• Hamburger: <button type="button" aria-controls="sidebar" aria-expanded="false"> with aria-expanded toggled on every state change.
• Overlay: aria-hidden toggled.
• Focus on open: first focusable element in the sidebar receives focus.
• Focus on close: hamburger button receives focus.
• Escape-to-close: keydown listener on document fires only when the drawer is open.
• No full focus trap on the sidebar (it is a <nav>, not a role="dialog"; Tab naturally exits to main content, which is the expected mobile behaviour).

Test plan

• 15 tests in frontend/src/__tests__/mobile-nav.test.ts
  • Hamburger click adds/removes .sidebar-open
  • aria-expanded toggles correctly
  • Overlay click closes the drawer
  • Escape key closes the drawer (no-op when already closed)
  • Sidebar link click closes the drawer
  • Modifier-key click does not close the drawer
  • aria-hidden on sidebar and overlay toggled correctly
  • No-op when hamburger or sidebar missing from DOM
• Existing app.test.ts (16 tests) passes without changes
• Existing html.test.ts (97 tests) passes without changes
• npx tsc --noEmit clean

Out of scope

• Full ARIA focus trap (the sidebar is a navigation landmark, not a dialog)
• Swipe-to-close gesture
• Moving filter chips into the drawer

[coderabbitai]

Warning

Review limit reached

@cristim, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 37 minutes and 26 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ae125a19-01f1-417a-a8b2-e863c9e42690

📥 Commits

Reviewing files that changed from the base of the PR and between 55739c2 and a796d0e.

📒 Files selected for processing (4)

• frontend/src/__tests__/mobile-nav.test.ts
• frontend/src/app.ts
• frontend/src/index.html
• frontend/src/styles/responsive.css

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/mobile-nav-drawer

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cristim]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[cristim]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.