feat: 添加 SidebarAutoCloseOnRouteChange 组件以在路由变化时自动关闭侧边栏

This commit is contained in:
2025-09-25 12:34:09 +08:00
parent 78599e6031
commit 12991985ae
2 changed files with 16 additions and 0 deletions

View File

@ -2,6 +2,7 @@
import { AppSidebar } from "@/components/console/app-sidebar" import { AppSidebar } from "@/components/console/app-sidebar"
import { SiteHeader } from "@/components/console/site-header" import { SiteHeader } from "@/components/console/site-header"
import { import {
SidebarAutoCloseOnRouteChange,
SidebarInset, SidebarInset,
SidebarProvider, SidebarProvider,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
@ -51,6 +52,7 @@ export default function ConsoleLayout({
} as React.CSSProperties } as React.CSSProperties
} }
> >
<SidebarAutoCloseOnRouteChange />
<AppSidebar variant="inset" /> <AppSidebar variant="inset" />
<SidebarInset> <SidebarInset>
<SiteHeader title={title} /> <SiteHeader title={title} />

View File

@ -24,6 +24,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip" } from "@/components/ui/tooltip"
import { usePathname } from "next/navigation"
const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 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 { export {
Sidebar, Sidebar,
SidebarContent, SidebarContent,
@ -723,4 +736,5 @@ export {
SidebarSeparator, SidebarSeparator,
SidebarTrigger, SidebarTrigger,
useSidebar, useSidebar,
SidebarAutoCloseOnRouteChange,
} }