90 lines
3.6 KiB
JavaScript
90 lines
3.6 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { Link } from '@inertiajs/react';
|
|
import { Moon, Sun } from 'lucide-react';
|
|
|
|
import { Separator } from '@radix-ui/react-separator';
|
|
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
|
|
|
|
import { AppSidebar } from '@/components/ui/app-sidebar.jsx';
|
|
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
|
|
import { Button } from '@/components/ui/button';
|
|
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
|
|
import { TooltipContent } from '@/components/ui/tooltip.jsx';
|
|
import { Toaster } from '@/components/ui/toaster';
|
|
|
|
export default function AppLayout({ auth, header, children, toolbar }) {
|
|
|
|
const getTheme = () => {
|
|
if (localStorage.getItem('theme')) {
|
|
return localStorage.getItem('theme');
|
|
}
|
|
|
|
return 'light';
|
|
}
|
|
|
|
const themeButtonOnclickHandler = (theme) => {
|
|
// Set local storage
|
|
localStorage.setItem('theme', theme);
|
|
setTheme(theme);
|
|
|
|
const root = window.document.documentElement;
|
|
root.classList.remove("light", "dark");
|
|
root.classList.add(theme);
|
|
}
|
|
|
|
const [theme, setTheme] = useState(getTheme());
|
|
|
|
useEffect(() => {
|
|
getTheme();
|
|
setTheme(theme);
|
|
}, []);
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<AppSidebar auth={ auth } />
|
|
<SidebarInset>
|
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
<Breadcrumb className="hidden lg:block">
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link href={ route('comics.index') }>Home</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{ header }
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
<span className="flex gap-1 ml-auto justify-center content-center">
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
{ theme === 'dark' && (
|
|
<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
|
|
<Sun />
|
|
</Button>
|
|
) }
|
|
{ theme === 'light' && (
|
|
<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
|
|
<Moon />
|
|
</Button>
|
|
) }
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Toggle day / night mode</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
{ toolbar }
|
|
</span>
|
|
</header>
|
|
<div className="w-full pt-3">
|
|
{ children }
|
|
<Toaster />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|