54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import { useLayout } from "@/store/layoutStore";
|
|
import { useReminderNotifications } from "@/hooks/useReminderNotifications";
|
|
import { Navbar } from "./Navbar";
|
|
import { Sidebar, type SidebarVariant } from "./Sidebar";
|
|
import { HorizontalNav } from "./HorizontalNav";
|
|
|
|
function sidebarVariant(layout: string): SidebarVariant {
|
|
if (layout === "compact") return "compact";
|
|
if (layout === "wide") return "wide";
|
|
return "default";
|
|
}
|
|
|
|
function mainClass(layout: string): string {
|
|
const base = "mx-auto w-full flex-1 px-4 py-6 sm:px-6 sm:py-8";
|
|
if (layout === "topnav") return `${base} max-w-7xl`;
|
|
return `${base} max-w-6xl`;
|
|
}
|
|
|
|
export function AppLayout() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const { layout } = useLayout();
|
|
useReminderNotifications();
|
|
|
|
if (layout === "topnav") {
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<Navbar showMenuToggle={false} />
|
|
<HorizontalNav />
|
|
<main className={mainClass(layout)}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen lg:flex">
|
|
<Sidebar
|
|
open={sidebarOpen}
|
|
variant={sidebarVariant(layout)}
|
|
onNavigate={() => setSidebarOpen(false)}
|
|
/>
|
|
<div className="flex min-h-screen flex-1 flex-col">
|
|
<Navbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
|
|
<main className={mainClass(layout)}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|