Implement Fluid Emerald app redesign

resources/js/layouts/settings/Layout.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import {
+    GitBranch,
+    KeyRound,
+    Palette,
+    ShieldCheck,
+    UserRound,
+} from 'lucide-vue-next';
 import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -16,22 +23,27 @@ const sidebarNavItems: NavItem[] = [
     {
         title: 'Profile',
         href: editProfile(),
+        icon: UserRound,
     },
     {
         title: 'Security',
         href: editSecurity(),
+        icon: ShieldCheck,
     },
     {
         title: 'Git connections',
         href: editGitConnections(),
+        icon: GitBranch,
     },
     {
         title: 'Applications',
         href: editApplications(),
+        icon: KeyRound,
     },
     {
         title: 'Appearance',
         href: editAppearance(),
+        icon: Palette,
     },
 ];
 
@@ -39,16 +51,16 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <div class="px-4 py-6">
+    <div class="app-page-narrow">
         <Heading
             title="Settings"
             description="Manage your profile, security, and Git integration settings"
         />
 
-        <div class="flex flex-col lg:flex-row lg:space-x-12">
-            <aside class="w-full max-w-xl lg:w-48">
+        <div class="grid gap-6 lg:grid-cols-[14rem_minmax(0,1fr)]">
+            <aside class="w-full">
                 <nav
-                    class="flex flex-col space-x-0 space-y-1"
+                    class="border-outline-variant bg-surface-container-lowest shadow-xs flex gap-1 overflow-x-auto rounded-xl border p-2 lg:flex-col"
                     aria-label="Settings"
                 >
                     <Button
@@ -56,8 +68,11 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
                         :key="toUrl(item.href)"
                         variant="ghost"
                         :class="[
-                            'w-full justify-start',
-                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
+                            'shrink-0 justify-start lg:w-full',
+                            {
+                                'bg-primary/12 text-on-primary-container hover:bg-primary/16 dark:text-primary-fixed':
+                                    isCurrentOrParentUrl(item.href),
+                            },
                         ]"
                         as-child
                     >
@@ -69,10 +84,12 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
                 </nav>
             </aside>
 
-            <Separator class="my-6 lg:hidden" />
+            <Separator class="lg:hidden" />
 
-            <div class="flex-1 md:max-w-2xl">
-                <section class="max-w-xl space-y-12">
+            <div class="min-w-0 flex-1">
+                <section
+                    class="border-outline-variant bg-surface-container-lowest shadow-xs space-y-12 rounded-xl border p-5 sm:p-7"
+                >
                     <slot />
                 </section>
             </div>