Initial

resources/js/Layouts/AppLayout.jsx

@@ -0,0 +1,87 @@
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/Components/ui/app-sidebar.jsx';
+import { Separator } from "@radix-ui/react-separator";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Toaster } from '@/components/ui/toaster';
+import { Button } from '@/components/ui/button';
+import { Moon, Settings, Sun } from 'lucide-react';
+import { Link, usePage } from '@inertiajs/react';
+import { useEffect, useState } from "react";
+import { Tooltip, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
+import { TooltipContent } from "@/Components/ui/tooltip.jsx";
+
+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>
+    );
+}

resources/js/Layouts/GuestLayout.jsx

@@ -1,17 +1,10 @@
-import ApplicationLogo from '@/Components/ApplicationLogo';
 import { Link } from '@inertiajs/react';
 
 export default function GuestLayout({ children }) {
     return (
-        <div className="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0 dark:bg-gray-900">
-            <div>
-                <Link href="/">
-                    <ApplicationLogo className="h-20 w-20 fill-current text-gray-500" />
-                </Link>
-            </div>
-
-            <div className="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg dark:bg-gray-800">
-                {children}
+        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                { children }
             </div>
         </div>
     );