feat: add two-factor authentication support and related configurations

resources/js/layouts/DashboardLayout.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import { useForm } from '@inertiajs/vue3'
 import Logo from '@/components/common/Logo.vue'
 import { useAuth } from '@/composables/useAuth'
@@ -18,6 +19,24 @@ const sidebarLinks = [
     to: '/dashboard',
   },
 ]
+
+const userMenuItems: DropdownMenuItem[][] = [
+  [
+    {
+      label: 'Profile',
+      icon: 'i-lucide-user-round',
+      to: '/profile',
+    },
+  ],
+  [
+    {
+      label: 'Sign out',
+      icon: 'i-lucide-log-out',
+      color: 'error',
+      onSelect: logout,
+    },
+  ],
+]
 </script>
 
 <template>
@@ -28,27 +47,36 @@ const sidebarLinks = [
           <Logo :link-to-home="false" size="sm" />
         </template>
 
-        <UNavigationMenu :items="sidebarLinks" />
+        <UNavigationMenu :items="sidebarLinks" orientation="vertical" />
 
         <template #footer>
-          <div class="flex items-center gap-2 px-2">
-            <UAvatar :alt="user?.full_name" size="sm" />
-            <div class="flex-1 truncate text-sm">
-              <p class="font-medium truncate">
-                {{ user?.full_name }}
-              </p>
-              <p class="text-muted truncate text-xs">
-                {{ user?.email }}
-              </p>
-            </div>
+          <UDropdownMenu
+            :items="userMenuItems"
+            :content="{ align: 'start', side: 'top', sideOffset: 8 }"
+            :ui="{ content: 'w-64' }"
+          >
             <UButton
-              icon="i-lucide-log-out"
+              color="neutral"
               variant="ghost"
-              size="sm"
+              class="w-full justify-start px-2 py-2"
+              aria-label="Open user menu"
               :loading="logoutForm.processing"
-              @click="logout"
-            />
-          </div>
+            >
+              <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>
+          </UDropdownMenu>
         </template>
       </UDashboardSidebar>