fix(landing): improve responsive sidebar on smaller screens

[wyf027]

Summary

• Adds mobile sidebar backdrop overlay with smooth open/close transitions
• Uses responsive sidebar widths across breakpoints and locks body scroll when open
• Prevents content overlap by offsetting main layout when sidebar is expanded on small screens

Fixes #24

Test plan

• Resize to mobile/tablet widths and open sidebar via menu button
• Verify backdrop click closes sidebar
• Confirm page content is not hidden behind the sidebar panel
• Check desktop layout remains unchanged

Made with Cursor

Summary by CodeRabbit

• New Features

  • Sidebar now closes with Escape, backdrop click, or when selecting a nav item on small screens
  • Page scrolling is disabled while the sidebar is open

• Accessibility

  • Focus is managed and restored when the sidebar opens/closes; keyboard navigation is trapped inside the sidebar
  • Header controls include updated labels and expanded state; sidebar exposes dialog semantics for assistive tech

[vercel]

@SamXop123 is attempting to deploy a commit to the Dot_NotSam's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d21ea160-ef4b-47ad-98cc-0ee0ae36a57f

📥 Commits

Reviewing files that changed from the base of the PR and between 54b4142 and f663ff6.

📒 Files selected for processing (1)

• landing/src/components/Sidebar.jsx

---

📝 Walkthrough

Walkthrough

App centralizes sidebar open state with toggleSidebar/closeSidebar and a useEffect that locks body scroll and closes on Escape. Sidebar receives closeSidebar, adds focus-trap and dialog attributes, wires overlay and close button to close, and closes on navigation clicks for small viewports.

Changes

Sidebar Responsive Close Behavior

Layer / File(s)	Summary
Sidebar state management and scroll lock effect landing/src/App.jsx	App introduces toggleSidebar state updater and closeSidebar helper, plus a useEffect that disables body scrolling when the sidebar is open and registers an Escape key handler to close it, with proper cleanup.
Header wiring and prop change landing/src/App.jsx	Header menu trigger updated to call toggleSidebar with updated aria-expanded/aria-label and closeSidebar is passed into Sidebar instead of the previous prop.
Sidebar focus-trap, overlay, and dialog attributes landing/src/components/Sidebar.jsx	Sidebar adds handleNavClick (closes when viewport <1024), focus-trap (save/restore focus, Tab trapping, focus first element), Escape handling, overlay/backdrop wired to closeSidebar, pointerEvents control, and role="dialog", aria-modal, inert, and tabIndex updates.
Close button, nav wiring, and SidebarItem onNavigate landing/src/components/Sidebar.jsx	Header close button calls closeSidebar and has an accessibility label; navigation/support items pass onNavigate={handleNavClick}, and SidebarItem accepts an onNavigate prop and invokes it on click, allowing the sidebar to close on small-screen navigation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I nibble keys and pixel light,
A sidebar snug, then out of sight,
Escape or link — I hop and close,
Focus returns where the cursor grows,
Hooray, the UI hums — a rabbit knows! 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving responsive sidebar behavior on smaller screens, which aligns with the primary objective and code modifications.
Linked Issues check	✅ Passed	All acceptance criteria from issue #24 are met: sidebar responsive behavior added with toggle functionality, content overlap prevention via layout adjustments, smooth transitions implemented via Framer Motion, focus management for accessibility, and existing styling preserved.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #24 requirements: sidebar responsiveness improvements, backdrop overlay, focus trapping, scroll locking, and keyboard navigation. No unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch fix/responsive-sidebar-mobile

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@landing/src/components/Sidebar.jsx`:
- Around line 23-31: Replace the current use of aria-hidden on the motion.aside
with the boolean inert prop tied to isSidebarOpen (e.g., inert={!isSidebarOpen})
so the closed sidebar subtree is removed from the accessibility tree and tab
order; remove aria-hidden from the motion.aside and keep role="dialog" and
aria-modal="true". Additionally, implement focus management when the dialog
opens/closes in the same component (motion.aside) by moving focus into the
dialog and trapping focus while isSidebarOpen is true (use a focus-trap utility
or a small hook to save/restore previously focused element and trap
tab/shift+tab inside the dialog). Ensure these changes reference the existing
isSidebarOpen state and motion.aside element so the inert prop and focus-trap
target the same DOM node.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3b31ff3c-9218-464b-b2cf-6ab684ac0c10

📥 Commits

Reviewing files that changed from the base of the PR and between 7e6a9e1 and 54b4142.

📒 Files selected for processing (2)

• landing/src/App.jsx
• landing/src/components/Sidebar.jsx