0.1.3
This commit is contained in:
@@ -1,43 +1,13 @@
|
||||
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';
|
||||
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';
|
||||
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(() => {
|
||||
setTheme(getTheme());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar auth={ auth } />
|
||||
@@ -56,20 +26,6 @@ export default function AppLayout({ auth, header, children, toolbar }) {
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<span className="flex gap-1 ml-auto justify-center content-center">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
{ theme === 'dark' ? (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
|
||||
<Sun />
|
||||
</Button>) : (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
|
||||
<Moon />
|
||||
</Button>) }
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Toggle day / night mode</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
{ toolbar }
|
||||
</span>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user