73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Menu } from "lucide-react";
|
|
import { Sidebar } from "@/components/layout/Sidebar";
|
|
import { UtilityControls } from "@/components/layout/UtilityControls";
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
|
|
export function AppShell({
|
|
children,
|
|
initialTheme,
|
|
}: {
|
|
children: React.ReactNode;
|
|
initialTheme?: "dark" | "light";
|
|
}) {
|
|
const { t } = useI18n();
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!drawerOpen) return;
|
|
const onKey = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") setDrawerOpen(false);
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
window.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [drawerOpen]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-white">
|
|
<div className="flex min-h-screen">
|
|
<Sidebar />
|
|
<div className="flex min-h-screen flex-1 flex-col">
|
|
<header className="sticky top-0 z-30 flex min-h-[3.5rem] flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-black/20 px-4 py-2 backdrop-blur">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setDrawerOpen(true)}
|
|
aria-label={t("common.openMenu")}
|
|
className="md:hidden rounded-lg border border-white/10 bg-white/5 p-2 text-zinc-300 hover:bg-white/10 hover:text-white"
|
|
>
|
|
<Menu className="h-4 w-4" />
|
|
</button>
|
|
<div className="text-sm font-semibold tracking-wide md:hidden">
|
|
{t("sidebar.productTitle")}
|
|
</div>
|
|
</div>
|
|
<UtilityControls initialTheme={initialTheme} />
|
|
</header>
|
|
<main className="flex-1">{children}</main>
|
|
</div>
|
|
</div>
|
|
|
|
{drawerOpen && (
|
|
<div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true">
|
|
<button
|
|
type="button"
|
|
className="absolute inset-0 bg-black/70"
|
|
aria-label={t("common.close")}
|
|
onClick={() => setDrawerOpen(false)}
|
|
/>
|
|
<div className="absolute inset-y-0 left-0 flex w-72 max-w-[85vw] flex-col bg-black/40">
|
|
<Sidebar variant="drawer" onNavigate={() => setDrawerOpen(false)} onClose={() => setDrawerOpen(false)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|