feat(profile): align settings with dashboard layout

resources/js/components/common/Logo.vue

@@ -16,13 +16,17 @@ const { config } = useAuth()
 </script>
 
 <template>
-  <component :is="linkToHome ? Link : 'div'" :href="linkToHome ? '/' : undefined" class="flex items-center gap-3">
+  <component
+    :is="linkToHome ? Link : 'div'"
+    :href="linkToHome ? '/' : undefined"
+    class="flex min-w-0 items-center gap-3 overflow-hidden"
+  >
     <!--
       Replace this placeholder with your actual logo:
       <img src="/images/logo.svg" alt="Logo" :class="iconSizeClass">
     -->
     <div
-      class="flex items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
+      class="flex shrink-0 items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
       :class="{
         'size-8 text-sm': size === 'sm',
         'size-12 text-xl': size === 'md',
@@ -34,7 +38,7 @@ const { config } = useAuth()
 
     <span
       v-if="showText"
-      class="font-semibold text-gray-900 dark:text-white"
+      class="min-w-0 truncate font-semibold text-gray-900 dark:text-white"
       :class="{
         'text-lg': size === 'sm',
         'text-2xl': size === 'md',

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>