initial commit

resources/js/Layouts/Auth.vue

@@ -0,0 +1,14 @@
+<template>
+	<div>
+		<!-- <h1>Auth Layout</h1>
+        <slot></slot> -->
+		<Header />
+		<!-- <main class="px-6"> -->
+		<slot></slot>
+		<!-- </main> -->
+	</div>
+</template>
+
+<script setup>
+import Header from '@/Components/Header.vue';
+</script>

resources/js/Layouts/Default.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <!-- <h1>Default Layout</h1>
+        <slot></slot> -->
+        <Header />
+        <main class="px-6">
+            <slot></slot>
+        </main>
+    </div>
+</template>
+
+<script setup>
+import Header from '@/Components/Header.vue';
+</script>

resources/js/Layouts/LayoutAuthenticated.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { LayoutService } from '@/Stores/layout.js'
+import { StyleService } from '@/Stores/style'
+import NavBar from '@/Components/NavBar.vue'
+import AsideMenu from '@/Components/AsideMenu.vue'
+import FooterBar from '@/Components/FooterBar.vue'
+
+const styleService = StyleService()
+
+const layoutService = LayoutService()
+
+// defineProps({	
+// 	user: {
+// 		type: Object,
+// 		default: () => ({}),
+// 	}
+// });
+
+</script>
+
+<template>
+  <div :class="{ 'dark': styleService.darkMode, 'overflow-hidden lg:overflow-visible': layoutService.isAsideMobileExpanded }">
+    <div
+      :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }"
+      class="pt-14 xl:pl-60 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+    >
+      <NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" />
+      <AsideMenu />
+      <slot></slot>
+      <FooterBar />
+    </div>
+  </div>
+</template>

resources/js/Layouts/LayoutGuest.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { StyleService } from '@/Stores/style.js';
+const styleService = StyleService();
+</script>
+
+<template>
+	<!-- dark; true or false from pinia service -->
+	<div :class="{ dark: styleService.darkMode }">
+		<div class="bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+			<slot />
+		</div>
+	</div>
+</template>