first commit

resources/js/layouts/settings/Layout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { Link } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+    import Heading from '@/components/Heading.svelte';
+    import { Button } from '@/components/ui/button';
+    import { Separator } from '@/components/ui/separator';
+    import { currentUrlState } from '@/lib/currentUrl.svelte';
+    import { toUrl } from '@/lib/utils';
+    import { edit as editAppearance } from '@/routes/appearance';
+    import { edit as editProfile } from '@/routes/profile';
+    import { edit as editSecurity } from '@/routes/security';
+    import type { NavItem } from '@/types';
+
+    let {
+        children,
+    }: {
+        children?: Snippet;
+    } = $props();
+
+    const sidebarNavItems: NavItem[] = [
+        {
+            title: 'Profile',
+            href: editProfile(),
+        },
+        {
+            title: 'Security',
+            href: editSecurity(),
+        },
+        {
+            title: 'Appearance',
+            href: editAppearance(),
+        },
+    ];
+
+    const url = currentUrlState();
+</script>
+
+<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">
+        <aside class="w-full max-w-xl lg:w-48">
+            <nav
+                class="flex flex-col space-y-1 space-x-0"
+                aria-label="Settings"
+            >
+                {#each sidebarNavItems as item (toUrl(item.href))}
+                    <Button
+                        variant="ghost"
+                        class="w-full justify-start {url.isCurrentUrl(
+                            item.href,
+                            url.currentUrl,
+                        )
+                            ? 'bg-muted'
+                            : ''}"
+                        asChild
+                    >
+                        {#snippet children(props)}
+                            <Link href={toUrl(item.href)} class={props.class}>
+                                {item.title}
+                            </Link>
+                        {/snippet}
+                    </Button>
+                {/each}
+            </nav>
+        </aside>
+
+        <Separator class="my-6 lg:hidden" />
+
+        <div class="flex-1 md:max-w-2xl">
+            <section class="max-w-xl space-y-12">
+                {@render children?.()}
+            </section>
+        </div>
+    </div>
+</div>