From e95a3fc8eef6e572ca07b66bfae3b43efb056f1b Mon Sep 17 00:00:00 2001 From: Jan Jaap Date: Tue, 28 Apr 2026 14:28:39 +0200 Subject: [PATCH] fix(web): close mobile sidebar on navigation The offcanvas sidebar drawer stayed open after creating a thread or opening one from the list, forcing a manual second tap to dismiss it. Subscribe to the router pathname at the layout level and close the mobile drawer on every route change, so all navigation entry points (thread list, command palette, new-thread hook, keybindings) share the fix. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/web/src/components/AppSidebarLayout.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx index d98f30a1e5c..03535e0dec7 100644 --- a/apps/web/src/components/AppSidebarLayout.tsx +++ b/apps/web/src/components/AppSidebarLayout.tsx @@ -1,13 +1,26 @@ import { useEffect, type ReactNode } from "react"; -import { useNavigate } from "@tanstack/react-router"; +import { useNavigate, useRouterState } from "@tanstack/react-router"; import ThreadSidebar from "./Sidebar"; -import { Sidebar, SidebarProvider, SidebarRail } from "./ui/sidebar"; +import { Sidebar, SidebarProvider, SidebarRail, useSidebar } from "./ui/sidebar"; import { clearShortcutModifierState, syncShortcutModifierStateFromKeyboardEvent, } from "../shortcutModifierState"; +function CloseMobileSidebarOnNavigate() { + const { isMobile, openMobile, setOpenMobile } = useSidebar(); + const pathname = useRouterState({ select: (state) => state.location.pathname }); + useEffect(() => { + if (isMobile && openMobile) { + setOpenMobile(false); + } + // Only close on pathname changes — isMobile/openMobile flips alone shouldn't dismiss. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [pathname]); + return null; +} + const THREAD_SIDEBAR_WIDTH_STORAGE_KEY = "chat_thread_sidebar_width"; const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16; const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16; @@ -55,6 +68,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) { return ( +