skl/resources/js/layouts/authenticated-layout.tsx

61 lines
2.1 KiB
TypeScript

import { PropsWithChildren, ReactNode } from "react";
import { AppSidebar } from "@/components/app-sidebar";
import "../../css/app.css";
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import AppearanceDropdown from "@/components/appearance-dropdown";
export default function AuthenticatedLayout({
header,
children,
}: PropsWithChildren<{
header?: ReactNode;
}>) {
return (
<SidebarProvider>
<AppSidebar />
<SidebarInset className="overflow-x-hidden w-full">
<header className="sticky top-0 bg-background flex h-16 shrink-0 items-center gap-2 justify-between p-4 border-b md:border-none md:rounded-xl">
<div className="flex items-center gap-2">
<SidebarTrigger className="-ml-1" />
<Separator
orientation="vertical"
className="mr-2 h-4"
/>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>{header}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div>
<AppearanceDropdown />
</div>
</header>
<main className="p-4 md:pt-0 h-full w-full max-w-full overflow-x-hidden">
{children}
</main>
<footer className="text-sm p-4 text-center bg-background border-t">
© Copyright {new Date().getFullYear()} Bidang Tata
Lingkungan dan Kebersihan - Dinas Lingkungan Hidup Provinsi
DKI Jakarta
</footer>
</SidebarInset>
</SidebarProvider>
);
}