Initial work on SettingLayout #174

2025-12-10 13:32:44 +01:00
parent 63f3b999cf
commit 9ce912baa2
3 changed files with 37 additions and 29 deletions
@@ -2,13 +2,15 @@
 import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/crm-button';
 import { Separator } from '@/components/ui/separator';
-import { toUrl, urlIsActive } from '@/lib/utils';
+import { cn, toUrl, urlIsActive } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance';
 import { edit as editPassword } from '@/routes/password';
 import { edit as editProfile } from '@/routes/profile';
 import { show } from '@/routes/two-factor';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppHeader from '@/components/AppHeader.vue'

 const sidebarNavItems: NavItem[] = [
    {
@@ -33,19 +35,23 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
 </script>

 <template>
-    <div class="px-4 py-6">
-        <Heading title="Settings" description="Manage your profile and account settings" />
+
+    <Head title="Einstellungen" />
+
+    <AppLayout title="Einstellungen">
+
+        <div class="mb-12 gap-4">
+            <Heading title="Einstellungen" description="Manage your profile and account settings" />
+        </div>
+
+        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6">

            <div class="flex flex-col lg:flex-row lg:space-x-12">
                <aside class="w-full max-w-xl lg:w-48">
                    <nav class="flex flex-col space-y-1 space-x-0">
-                    <Button
-                        v-for="item in sidebarNavItems"
-                        :key="toUrl(item.href)"
-                        variant="ghost"
+                        <Button v-for="item in sidebarNavItems" :key="toUrl(item.href)" variant="ghost"
                            :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
-                        as-child
-                    >
+                            as-child>
                            <Link :href="item.href" prefetch>
                                {{ item.title }}
                            </Link>
@@ -62,4 +68,6 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
                </div>
            </div>
        </div>
+
+    </AppLayout>
 </template>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Heading from '@/components/Heading.vue';
 import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 </script>
@@ -7,8 +8,7 @@ import AppLayout from '@/layouts/AppLayout.vue';

    <AppLayout title="Erfolge">
        <div>
-            <h1 class="text-xl">Kategorie</h1>
-            <h2 class="text-sm text-neutral-400 mb-4">3 von 10 freigeschaltet</h2>
+            <Heading title="Kategorie" description="3 von 10 freigeschaltet" />

            <div class="flex flex-row flex-wrap gap-4">
                <div v-for="n in 10" class="relative flex flex-col items-center">
@@ -24,7 +24,7 @@ const user = page.props.auth.user;
 </script>

 <template>
-    <AppLayout title="Profile settings">
+    <!-- <AppLayout title="Profile settings"> -->

        <SettingsLayout>
            <div class="flex flex-col space-y-6">
@@ -81,5 +81,5 @@ const user = page.props.auth.user;

            <DeleteUser />
        </SettingsLayout>
-    </AppLayout>
+    <!-- </AppLayout> -->
 </template>