feat: Add ProfileDialog component for user profile management

- Introduce ProfileDialog.vue to display user information and account settings.
- Integrate ProfileDialog into Navbar.vue for easy access to user profile.
- Implement logout functionality within the ProfileDialog, enhancing user experience.

src/components/layout/Navbar.vue

@@ -9,6 +9,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { Sun, Moon, Menu, X, User, LogOut } from 'lucide-vue-next'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
+import ProfileDialog from '@/components/auth/ProfileDialog.vue'
 import { auth } from '@/composables/useAuth'
 
 interface NavigationItem {
@@ -21,6 +22,7 @@ const { t } = useI18n()
 const { theme, setTheme } = useTheme()
 const isOpen = ref(false)
 const showLoginDialog = ref(false)
+const showProfileDialog = ref(false)
 
 const navigation = computed<NavigationItem[]>(() => [
   { name: t('nav.home'), href: '/' },
@@ -41,6 +43,11 @@ const openLoginDialog = () => {
   isOpen.value = false // Close mobile menu
 }
 
+const openProfileDialog = () => {
+  showProfileDialog.value = true
+  isOpen.value = false // Close mobile menu
+}
+
 const handleLogout = async () => {
   try {
     auth.logout()
@@ -87,7 +94,7 @@ const handleLogout = async () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" class="w-56">
-              <DropdownMenuItem class="gap-2">
+              <DropdownMenuItem @click="openProfileDialog" class="gap-2">
                 <User class="h-4 w-4" />
                 Profile
               </DropdownMenuItem>
@@ -146,7 +153,7 @@ const handleLogout = async () => {
               <Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
             </div>
             <div class="space-y-1">
-              <Button variant="ghost" size="sm" class="w-full justify-start gap-2">
+              <Button variant="ghost" size="sm" @click="openProfileDialog" class="w-full justify-start gap-2">
                 <User class="h-4 w-4" />
                 Profile
               </Button>
@@ -181,5 +188,8 @@ const handleLogout = async () => {
 
     <!-- Login Dialog -->
     <LoginDialog v-model:is-open="showLoginDialog" />
+    
+    <!-- Profile Dialog -->
+    <ProfileDialog v-model:is-open="showProfileDialog" />
   </nav>
 </template>