diff --git a/web/src/app/console/layout.tsx b/web/src/app/console/layout.tsx index 925167c..d8e042f 100644 --- a/web/src/app/console/layout.tsx +++ b/web/src/app/console/layout.tsx @@ -2,6 +2,7 @@ import { AppSidebar } from "@/components/console/app-sidebar" import { SiteHeader } from "@/components/console/site-header" import { + SidebarAutoCloseOnRouteChange, SidebarInset, SidebarProvider, } from "@/components/ui/sidebar" @@ -51,6 +52,7 @@ export default function ConsoleLayout({ } as React.CSSProperties } > + diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx index 1ee5a45..d6cd97c 100644 --- a/web/src/components/ui/sidebar.tsx +++ b/web/src/components/ui/sidebar.tsx @@ -24,6 +24,7 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" +import { usePathname } from "next/navigation" const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 @@ -698,6 +699,18 @@ function SidebarMenuSubButton({ ) } +function SidebarAutoCloseOnRouteChange() { + const { isMobile, setOpenMobile } = useSidebar() + const pathname = usePathname() ?? "/" + + React.useEffect(() => { + if (isMobile) setOpenMobile(false) // 只在 pathname 变化时执行 + }, [pathname, isMobile, setOpenMobile]) + + return null +} + + export { Sidebar, SidebarContent, @@ -723,4 +736,5 @@ export { SidebarSeparator, SidebarTrigger, useSidebar, + SidebarAutoCloseOnRouteChange, }