Basic Laravel project

resources/js/layouts/app/AppHeaderLayout.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import AppContent from '@/components/AppContent.vue';
+import AppHeader from '@/components/AppHeader.vue';
+import AppShell from '@/components/AppShell.vue';
+import type { BreadcrumbItemType } from '@/types';
+
+interface Props {
+    breadcrumbs?: BreadcrumbItemType[];
+}
+
+withDefaults(defineProps<Props>(), {
+    breadcrumbs: () => [],
+});
+</script>
+
+<template>
+    <AppShell class="flex-col">
+        <AppHeader :breadcrumbs="breadcrumbs" />
+        <AppContent>
+            <slot />
+        </AppContent>
+    </AppShell>
+</template>

resources/js/layouts/app/AppSidebarLayout.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import AppContent from '@/components/AppContent.vue';
+import AppShell from '@/components/AppShell.vue';
+import AppSidebar from '@/components/AppSidebar.vue';
+import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
+import type { BreadcrumbItemType } from '@/types';
+
+interface Props {
+    breadcrumbs?: BreadcrumbItemType[];
+}
+
+withDefaults(defineProps<Props>(), {
+    breadcrumbs: () => [],
+});
+</script>
+
+<template>
+    <AppShell variant="sidebar">
+        <AppSidebar />
+        <AppContent variant="sidebar" class="overflow-x-hidden">
+            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
+            <slot />
+        </AppContent>
+    </AppShell>
+</template>