feat(profile): align settings with dashboard layout

resources/js/layouts/DashboardLayout.vue

@@ -41,41 +41,57 @@ const userMenuItems: DropdownMenuItem[][] = [
 
 <template>
   <UApp>
-    <UDashboardGroup>
-      <UDashboardSidebar collapsible>
-        <template #header>
-          <Logo :link-to-home="false" size="sm" />
+    <UDashboardGroup unit="rem" storage="local">
+      <UDashboardSidebar
+        id="main"
+        resizable
+        collapsible
+        class="bg-elevated/25"
+        :min-size="14"
+        :default-size="16"
+        :max-size="24"
+        :collapsed-size="4"
+        :ui="{ footer: 'lg:border-t lg:border-default' }"
+      >
+        <template #header="{ collapsed }">
+          <Logo
+            :link-to-home="false"
+            size="sm"
+            :show-text="!collapsed"
+          />
         </template>
 
-        <UNavigationMenu :items="sidebarLinks" orientation="vertical" />
+        <template #default="{ collapsed }">
+          <UNavigationMenu
+            :items="sidebarLinks"
+            orientation="vertical"
+            :collapsed="collapsed"
+            tooltip
+          />
+        </template>
 
-        <template #footer>
+        <template #footer="{ collapsed }">
           <UDropdownMenu
             :items="userMenuItems"
-            :content="{ align: 'start', side: 'top', sideOffset: 8 }"
-            :ui="{ content: 'w-64' }"
+            :content="{ align: 'center', side: 'top', sideOffset: 8, collisionPadding: 12 }"
+            :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
           >
             <UButton
+              :avatar="{ alt: user?.full_name }"
+              :label="collapsed ? undefined : user?.full_name"
+              :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
               color="neutral"
               variant="ghost"
-              class="w-full justify-start px-2 py-2"
+              block
+              :square="collapsed"
+              class="data-[state=open]:bg-elevated"
               aria-label="Open user menu"
               :loading="logoutForm.processing"
-            >
-              <UAvatar :alt="user?.full_name" size="sm" />
-              <span class="min-w-0 flex-1 text-left">
-                <span class="block truncate text-sm font-medium text-highlighted">
-                  {{ user?.full_name }}
-                </span>
-                <span class="block truncate text-xs font-normal text-muted">
-                  {{ user?.email }}
-                </span>
-              </span>
-              <UIcon
-                name="i-lucide-chevrons-up-down"
-                class="size-4 shrink-0 text-muted"
-              />
-            </UButton>
+              :ui="{
+                label: 'truncate text-left',
+                trailingIcon: 'text-dimmed',
+              }"
+            />
           </UDropdownMenu>
         </template>
       </UDashboardSidebar>