web-app/src/components/layout/Navbar.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTheme } from '@/components/theme-provider'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
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 { auth } from '@/composables/useAuth'

interface NavigationItem {
  name: string
  href: string
}

const { t } = useI18n()
const { theme, setTheme } = useTheme()
const isOpen = ref(false)
const showLoginDialog = ref(false)

const navigation = computed<NavigationItem[]>(() => [
  { name: t('nav.home'), href: '/' },
  { name: t('nav.events'), href: '/events' },
  { name: t('nav.support'), href: '/support' },
])

const toggleMenu = () => {
  isOpen.value = !isOpen.value
}

const toggleTheme = () => {
  setTheme(theme.value === 'dark' ? 'light' : 'dark')
}

const openLoginDialog = () => {
  showLoginDialog.value = true
  isOpen.value = false // Close mobile menu
}

const handleLogout = async () => {
  try {
    await auth.logout()
    isOpen.value = false
  } catch (error) {
    console.error('Logout failed:', error)
  }
}
</script>

<template>
  <nav class="w-full text-foreground">
    <div class="flex items-center justify-between px-4 md:px-0">
      <!-- Logo and Desktop Navigation -->
      <div class="flex items-center gap-6">
        <router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
          <img src="@/assets/logo.png" alt="Logo" class="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12" />
          <span class="font-semibold">{{ t('nav.title') }}</span>
        </router-link>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex gap-4">
          <router-link v-for="item in navigation" :key="item.name" :to="item.href"
            class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2" :class="{
              'text-foreground': $route.path === item.href
            }">
            {{ item.name }}
          </router-link>
        </div>
      </div>

      <!-- Theme Toggle, Language, and Identity -->
      <div class="flex items-center gap-2">
        <!-- Authentication Management -->
        <div class="hidden sm:block">
          <DropdownMenu v-if="auth.isAuthenticated.value">
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm" class="gap-2">
                <User class="h-4 w-4" />
                <span class="max-w-24 truncate">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
                <Badge variant="secondary" class="text-xs">Logged In</Badge>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" class="w-56">
              <DropdownMenuItem class="gap-2">
                <User class="h-4 w-4" />
                Profile
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem @click="handleLogout" class="gap-2 text-destructive">
                <LogOut class="h-4 w-4" />
                Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <Button v-else variant="outline" size="sm" @click="openLoginDialog" class="gap-2">
            <User class="h-4 w-4" />
            Login
          </Button>
        </div>

        <!-- Hide theme toggle on mobile -->
        <Button variant="ghost" size="icon" @click="toggleTheme"
          class="hidden sm:inline-flex text-foreground hover:text-foreground/90 hover:bg-accent">
          <Sun v-if="theme === 'dark'" class="h-5 w-5" />
          <Moon v-else class="h-5 w-5" />
        </Button>

        <!-- Hide language switcher on mobile -->
        <div class="hidden sm:block">
          <LanguageSwitcher />
        </div>

        <!-- Mobile menu button -->
        <Button variant="ghost" size="icon" @click="toggleMenu"
          class="md:hidden text-foreground hover:text-foreground/90 hover:bg-accent">
          <span class="sr-only">Open main menu</span>
          <Menu v-if="!isOpen" class="h-5 w-5" />
          <X v-else class="h-5 w-5" />
        </Button>
      </div>
    </div>

    <!-- Mobile menu -->
    <div v-show="isOpen"
      class="absolute left-0 right-0 top-14 z-40 border-b bg-background/95 backdrop-blur-sm md:hidden">
      <div class="space-y-1 p-4">
        <!-- Authentication in mobile menu -->
        <div class="mb-4 px-2">
          <Button v-if="!auth.isAuthenticated.value" variant="outline" size="sm"
            @click="openLoginDialog"
            class="w-full gap-2 min-h-[44px] touch-manipulation">
            <User class="h-4 w-4" />
            Login
          </Button>
          <div v-else class="space-y-2">
            <div class="flex items-center gap-2 px-2 py-1">
              <User class="h-4 w-4" />
              <span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
              <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">
                <User class="h-4 w-4" />
                Profile
              </Button>
              <Button variant="ghost" size="sm" @click="handleLogout"
                class="w-full justify-start gap-2 text-destructive">
                <LogOut class="h-4 w-4" />
                Logout
              </Button>
            </div>
          </div>
        </div>

        <!-- Add theme and language toggles to mobile menu -->
        <div class="flex items-center justify-between mb-4 px-2 border-t pt-4">
          <Button variant="ghost" size="icon" @click="toggleTheme"
            class="text-foreground hover:text-foreground/90 hover:bg-accent">
            <Sun v-if="theme === 'dark'" class="h-5 w-5" />
            <Moon v-else class="h-5 w-5" />
          </Button>
          <LanguageSwitcher />
        </div>

        <router-link v-for="item in navigation" :key="item.name" :to="item.href"
          class="flex items-center gap-2 px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors"
          :class="{
            'text-foreground': $route.path === item.href
          }" @click="isOpen = false">
          {{ item.name }}
        </router-link>
      </div>
    </div>

    <!-- Login Dialog -->
    <LoginDialog v-model:is-open="showLoginDialog" />
  </nav>
</template>