3ab70498e6
- Integrated ModeToggle component into the layout for theme switching. - Replaced the existing button in the sidebar footer with SidebarMenuButton for improved styling and functionality.
31 lines
1018 B
TypeScript
31 lines
1018 B
TypeScript
import type { FC } from "react"
|
|
import { Outlet } from "react-router-dom";
|
|
|
|
import { ThemeProvider } from "@/components/theme/provider"
|
|
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
|
|
import { AppSidebar } from "@/components/sidebar";
|
|
import { ModeToggle } from "@/components/theme/toggle";
|
|
|
|
import { useSEO } from "@/hooks/use-seo";
|
|
|
|
export const Layout: FC = () => {
|
|
// 使用 SEO hook 自动更新 canonical URL 和其他 SEO 元数据
|
|
useSEO();
|
|
|
|
return (
|
|
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
|
|
<nav className="flex items-center justify-between">
|
|
<SidebarTrigger className="size-10" />
|
|
<ModeToggle />
|
|
</nav>
|
|
<main className="flex-1 overflow-auto p-4 overflow-hidden">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</SidebarProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}; |