Populated Content

resources/js/layouts/AppLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import type { BreadcrumbItemType } from '@/types';
+import { onMounted } from 'vue';
+import Header from "@/components/Header.vue";
 
 interface Props {
     breadcrumbs?: BreadcrumbItemType[];
@@ -9,10 +10,64 @@ interface Props {
 withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
+
+
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
-        <slot />
-    </AppLayout>
+    <Header />
+    <slot />
 </template>
+
+<style>
+:root {
+    /* Colors */
+    --primary: hsl(210, 100%, 50%);
+    --primary-glow: hsl(210, 100%, 70%);
+    --accent: hsl(30, 100%, 46%);
+    --background: hsl(222, 84%, 5%);
+    --foreground: hsl(210, 40%, 98%);
+    --card: hsl(222, 84%, 8%);
+    --card-foreground: hsl(210, 40%, 95%);
+    --muted: hsl(217, 32%, 17%);
+    --muted-foreground: hsl(215, 20%, 65%);
+    --border: hsl(217, 32%, 17%);
+    --destructive: hsl(0, 62%, 30%);
+    --destructive-foreground: hsl(210, 40%, 98%);
+    --secondary: hsl(217, 32%, 17%);
+    --secondary-foreground: hsl(210, 40%, 98%);
+
+    /* Gradients */
+    --gradient-adventure: linear-gradient(
+        135deg,
+        hsl(210, 100%, 50%) 0%,
+        white 49%,
+        white 50%,
+        hsl(30, 100%, 46%) 100%
+    );
+    --gradient-hero: linear-gradient(135deg, hsl(210 100% 15%), hsl(25 95% 25%));
+    --gradient-accent: linear-gradient(135deg, hsl(30, 100%, 46%), hsl(210, 100%, 50%));
+
+    /* Shadows */
+    --shadow-intense: 0 25px 50px -12px hsl(210, 100%, 50% );
+    --shadow-glow: 0 0 40px hsl(210, 100%, 70% );
+
+    /* Transitions */
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--background);
+    color: var(--foreground);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+</style>

resources/js/layouts/app/AppHeaderLayout.vue

@@ -1,23 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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>