fix(web): close mobile sidebar on navigation

[jappyjan]

Summary

The offcanvas mobile sidebar drawer stays open after creating a thread or selecting one from the list, forcing a manual second tap to dismiss it before reaching the chat. Subscribe to the TanStack Router pathname at the layout level and close the mobile drawer on every route change.

Why this approach

Sidebar.tsx, useHandleNewThread, command palette navigation, and keybindings all call router.navigate(...) separately. A single layout-level subscription catches every entry point without touching each handler, and any future navigation paths inherit the fix automatically. Desktop is unaffected because of the isMobile guard.

Test plan

• iPhone via Tailscale: open sidebar → tap an existing thread → drawer auto-dismisses
• iPhone: open sidebar → "New thread" → drawer dismisses after the route lands on `/draft/...`
• iPhone: open sidebar → command palette navigation → drawer dismisses
• Desktop: sidebar open/close behavior unchanged

Screenshots / video

ScreenRecording_04-28-2026.23-45-30_1.mp4

---

Reproduction: I run `t3 serve --host "$(tailscale ip -4)"` on a Macbook and use the web UI from an iPhone over Tailscale. This is the first of four small mobile-usability fixes I plan to open separately per the small-and-focused guidance in CONTRIBUTING.md.

Note

Close mobile sidebar on navigation in AppSidebarLayout

Adds a CloseMobileSidebarOnNavigate component in AppSidebarLayout.tsx that watches the current pathname via useRouterState(). When the pathname changes and the sidebar is open on mobile, it calls setOpenMobile(false) to dismiss it.

^{Macroscope summarized d666cb7.}

---

Note

Low Risk
Low risk UI behavior change confined to the sidebar layout; it only toggles openMobile on pathname changes and is gated by isMobile. Main risk is unintended sidebar dismissal if some navigations shouldn’t close the drawer.

Overview
Ensures the off-canvas mobile sidebar drawer automatically closes whenever the route pathname changes.

This adds a small layout-level listener (CloseMobileSidebarOnNavigate) in AppSidebarLayout.tsx that subscribes to TanStack Router useRouterState() and calls setOpenMobile(false) when navigating, leaving desktop behavior unchanged.

^{Reviewed by Cursor Bugbot for commit d666cb7. Bugbot is set up for automated code reviews on this repo. Configure here.}

Summary by CodeRabbit

• New Features
  • Mobile sidebar now automatically closes when navigating between pages, improving the mobile browsing experience and reducing manual interactions.

[coderabbitai]

📝 Walkthrough

Walkthrough

The AppSidebarLayout component now imports useRouterState and useSidebar, and adds a CloseMobileSidebarOnNavigate helper. This helper monitors route pathname changes and automatically closes the mobile sidebar when navigation occurs while in mobile mode and the sidebar is open.

Changes

Cohort / File(s)	Summary
Mobile Sidebar Navigation Behavior apps/web/src/components/AppSidebarLayout.tsx	Added useRouterState and useSidebar hooks, and introduced CloseMobileSidebarOnNavigate helper to automatically close the mobile sidebar when route navigation occurs while in mobile mode and sidebar is open.

Sequence Diagram

sequenceDiagram
    participant User
    participant Router
    participant CloseMobileSidebarOnNavigate
    participant Sidebar
    
    User->>Router: Navigate to new route
    Router->>CloseMobileSidebarOnNavigate: Pathname changes
    CloseMobileSidebarOnNavigate->>Sidebar: Check sidebar state
    Sidebar-->>CloseMobileSidebarOnNavigate: Is mobile mode & open?
    alt Mobile and Open
        CloseMobileSidebarOnNavigate->>Sidebar: Close sidebar
        Sidebar-->>User: Sidebar closes
    else Not mobile or already closed
        CloseMobileSidebarOnNavigate-->>User: No action needed
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 With nose held high and ears alert,
The sidebar now won't hurt!
When paths shift through navigation's flight,
Mobile closes out of sight. ✨
A hop and click—the UX is right! 🥕

🚥 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
Title check	✅ Passed	The title clearly and specifically describes the main change: adding automatic mobile sidebar closure on navigation.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	PR description comprehensively covers all template requirements with clear explanations of changes, rationale, test plan, and supporting materials.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[jappyjan]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

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.

[macroscopeapp]

Approvability

Verdict: Approved

This is a straightforward UI bug fix that closes the mobile sidebar when users navigate to a new page. The change is self-contained, uses standard React patterns, and has no security or backend implications.

^{You can customize Macroscope's approvability policy. Learn more.}

[gameroman]

This one is probably better than #1293, #1259, and #1549