INit

resources/js/layouts/app/app-header-layout.tsx

@@ -0,0 +1,17 @@
+import { AppContent } from '@/components/app-content';
+import { AppHeader } from '@/components/app-header';
+import { AppShell } from '@/components/app-shell';
+import { type BreadcrumbItem } from '@/types';
+import type { PropsWithChildren } from 'react';
+
+export default function AppHeaderLayout({
+    children,
+    breadcrumbs,
+}: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
+    return (
+        <AppShell>
+            <AppHeader breadcrumbs={breadcrumbs} />
+            <AppContent>{children}</AppContent>
+        </AppShell>
+    );
+}

resources/js/layouts/app/app-sidebar-layout.tsx

@@ -0,0 +1,21 @@
+import { AppContent } from '@/components/app-content';
+import { AppShell } from '@/components/app-shell';
+import { AppSidebar } from '@/components/app-sidebar';
+import { AppSidebarHeader } from '@/components/app-sidebar-header';
+import { type BreadcrumbItem } from '@/types';
+import { type PropsWithChildren } from 'react';
+
+export default function AppSidebarLayout({
+    children,
+    breadcrumbs = [],
+}: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
+    return (
+        <AppShell variant="sidebar">
+            <AppSidebar />
+            <AppContent variant="sidebar" className="overflow-x-hidden">
+                <AppSidebarHeader breadcrumbs={breadcrumbs} />
+                {children}
+            </AppContent>
+        </AppShell>
+    );
+}