feat(profile): align settings with dashboard layout

resources/js/components/profile/ProfileSettingsPanel.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const links = [[
+  {
+    label: 'General',
+    icon: 'i-lucide-user',
+    to: '/profile',
+    exact: true,
+  },
+  {
+    label: 'Security',
+    icon: 'i-lucide-shield',
+    to: '/profile/security',
+  },
+]] satisfies NavigationMenuItem[][]
+</script>
+
+<template>
+  <UDashboardPanel id="profile" :ui="{ body: 'lg:py-12' }">
+    <template #header>
+      <UDashboardNavbar title="Profile">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <UNavigationMenu
+          :items="links"
+          highlight
+          class="-mx-1 flex-1"
+        />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="mx-auto flex w-full max-w-2xl flex-col gap-4 sm:gap-6 lg:gap-12">
+        <slot />
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>