Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Initial work on SettingLayout #174

Browse Source
This commit is contained in:
Daniel Stock
2025-12-10 13:32:44 +01:00
parent 63f3b999cf
commit 9ce912baa2
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/layouts/settings/Layout.vue
+33 -25
View File
@@ -2,13 +2,15 @@
import Heading from '@/components/Heading.vue'; import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/crm-button'; import { Button } from '@/components/ui/crm-button';
import { Separator } from '@/components/ui/separator'; 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 editAppearance } from '@/routes/appearance';
import { edit as editPassword } from '@/routes/password'; import { edit as editPassword } from '@/routes/password';
import { edit as editProfile } from '@/routes/profile'; import { edit as editProfile } from '@/routes/profile';
import { show } from '@/routes/two-factor'; import { show } from '@/routes/two-factor';
import { type NavItem } from '@/types'; import { type NavItem } from '@/types';
import { Link } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3';
import AppLayout from '@/layouts/AppLayout.vue'
import AppHeader from '@/components/AppHeader.vue'
const sidebarNavItems: NavItem[] = [ const sidebarNavItems: NavItem[] = [
{ {
@@ -33,33 +35,39 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
</script> </script>
<template> <template>
<div class="px-4 py-6">
<Heading title="Settings" description="Manage your profile and account settings" />
<div class="flex flex-col lg:flex-row lg:space-x-12"> <Head title="Einstellungen" />
<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"
:class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
as-child
>
<Link :href="item.href" prefetch>
{{ item.title }}
</Link>
</Button>
</nav>
</aside>
<Separator class="my-6 lg:hidden" /> <AppLayout title="Einstellungen">
<div class="flex-1 md:max-w-2xl"> <div class="mb-12 gap-4">
<section class="max-w-xl space-y-12"> <Heading title="Einstellungen" description="Manage your profile and account settings" />
<slot /> </div>
</section>
<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"
:class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
as-child>
<Link :href="item.href" prefetch>
{{ item.title }}
</Link>
</Button>
</nav>
</aside>
<Separator class="my-6 lg:hidden" />
<div class="flex-1 md:max-w-2xl">
<section class="max-w-xl space-y-12">
<slot />
</section>
</div>
</div> </div>
</div> </div>
</div>
</AppLayout>
</template> </template>
resources/js/pages/Achievements.vue
+2 -2
View File
@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import Heading from '@/components/Heading.vue';
import PlaceholderPattern from '../components/PlaceholderPattern.vue'; import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import AppLayout from '@/layouts/AppLayout.vue'; import AppLayout from '@/layouts/AppLayout.vue';
</script> </script>
@@ -7,8 +8,7 @@ import AppLayout from '@/layouts/AppLayout.vue';
<AppLayout title="Erfolge"> <AppLayout title="Erfolge">
<div> <div>
<h1 class="text-xl">Kategorie</h1> <Heading title="Kategorie" description="3 von 10 freigeschaltet" />
<h2 class="text-sm text-neutral-400 mb-4">3 von 10 freigeschaltet</h2>
<div class="flex flex-row flex-wrap gap-4"> <div class="flex flex-row flex-wrap gap-4">
<div v-for="n in 10" class="relative flex flex-col items-center"> <div v-for="n in 10" class="relative flex flex-col items-center">
resources/js/pages/settings/Profile.vue
+2 -2
View File
@@ -24,7 +24,7 @@ const user = page.props.auth.user;
</script> </script>
<template> <template>
<AppLayout title="Profile settings"> <!-- <AppLayout title="Profile settings"> -->
<SettingsLayout> <SettingsLayout>
<div class="flex flex-col space-y-6"> <div class="flex flex-col space-y-6">
@@ -81,5 +81,5 @@ const user = page.props.auth.user;
<DeleteUser /> <DeleteUser />
</SettingsLayout> </SettingsLayout>
</AppLayout> <!-- </AppLayout> -->
</template> </template>