initial commit

resources/js/layouts/AppLayout.vue

@@ -0,0 +1,19 @@
+<template>
+<header>
+    <h1>Sales App</h1>
+</header>
+
+<div class="container">
+    <div class="row">
+        <div class="col">
+
+            <slot />
+
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup>
+
+</script>

resources/js/layouts/AuthLayout.vue

@@ -0,0 +1,40 @@
+<template>
+<div class="container pt-5">
+    <div class="row">
+        <div class="col">
+
+            <div class="auth-box">
+                <div class="d-flex flex-col items-center gap-4">
+                    <Link :href="route('home')" class="flex flex-col items-center gap-2 font-medium">
+                    <span class="visually-hidden">{{ title }}</span>
+                    </Link>
+
+                    <div class="space-y-2 text-center">
+                        <h1 class="text-xl font-medium">{{ title }}</h1>
+                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
+                    </div>
+                </div>
+
+                <slot />
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.auth-box {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+}
+</style>

resources/js/layouts/settings/Layout.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import Heading from '@/components/Heading.vue';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { type NavItem } from '@/types';
+import { Link, usePage } from '@inertiajs/vue3';
+
+const sidebarNavItems: NavItem[] = [
+    {
+        title: 'Profile',
+        href: '/settings/profile',
+    },
+    {
+        title: 'Password',
+        href: '/settings/password',
+    },
+    {
+        title: 'Appearance',
+        href: '/settings/appearance',
+    },
+];
+
+const page = usePage();
+
+const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.location).pathname : '';
+</script>
+
+<template>
+    <div class="px-4 py-6">
+        <Heading title="Settings" description="Manage your profile and account settings" />
+
+        <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-x-12 lg:space-y-0">
+            <aside class="w-full max-w-xl lg:w-48">
+                <nav class="flex flex-col space-x-0 space-y-1">
+                    <Button
+                        v-for="item in sidebarNavItems"
+                        :key="item.href"
+                        variant="ghost"
+                        :class="['w-full justify-start', { 'bg-muted': currentPath === item.href }]"
+                        as-child
+                    >
+                        <Link :href="item.href">
+                            {{ item.title }}
+                        </Link>
+                    </Button>
+                </nav>
+            </aside>
+
+            <Separator class="my-6 md:hidden" />
+
+            <div class="flex-1 md:max-w-2xl">
+                <section class="max-w-xl space-y-12">
+                    <slot />
+                </section>
+            </div>
+        </div>
+    </div>
+</template>