144 lines
5.2 KiB
Vue
144 lines
5.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { Menu, X, Sun, Moon, Zap, MessageSquareText, LogIn } from 'lucide-vue-next'
|
|
import { Button } from '@/components/ui/button'
|
|
import { useTheme } from '@/components/theme-provider'
|
|
import { useRouter } from 'vue-router'
|
|
import LogoutDialog from '@/components/ui/logout-dialog/LogoutDialog.vue'
|
|
import Login from '@/components/Login.vue'
|
|
import { Dialog, DialogContent } from '@/components/ui/dialog'
|
|
import ConnectionStatus from '@/components/ConnectionStatus.vue'
|
|
|
|
const { t, locale } = useI18n()
|
|
const { theme, setTheme } = useTheme()
|
|
// const nostrStore = useNostrStore()
|
|
const router = useRouter()
|
|
const isOpen = ref(false)
|
|
const showLoginDialog = ref(false)
|
|
|
|
const navigation = computed(() => [
|
|
{ name: t('nav.home'), href: '/' },
|
|
{ name: t('nav.support'), href: '/support', icon: MessageSquareText },
|
|
])
|
|
|
|
const toggleMenu = () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme.value === 'dark' ? 'light' : 'dark')
|
|
}
|
|
|
|
const toggleLocale = () => {
|
|
// Toggle between 'en' and 'es'
|
|
const newLocale = locale.value === 'en' ? 'es' : 'en'
|
|
locale.value = newLocale
|
|
// Store the preference
|
|
localStorage.setItem('locale', newLocale)
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
// await nostrStore.logout()
|
|
router.push('/')
|
|
}
|
|
|
|
const openLogin = () => {
|
|
showLoginDialog.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="w-full">
|
|
<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">
|
|
<Zap class="h-6 w-6" :class="theme === 'dark' ? 'text-orange-400' : 'text-fuchsia-600'" />
|
|
<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
|
|
}">
|
|
<component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
|
|
{{ item.name }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Toggle, Language, and Auth -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Hide theme toggle on mobile -->
|
|
<Button variant="ghost" size="icon" @click="toggleTheme" class="hidden sm:inline-flex">
|
|
<Sun v-if="theme === 'dark'" class="h-5 w-5" />
|
|
<Moon v-else class="h-5 w-5" />
|
|
</Button>
|
|
|
|
<!-- Hide language toggle on mobile -->
|
|
<Button variant="ghost"
|
|
class="text-muted-foreground hover:text-foreground transition-colors hidden sm:inline-flex"
|
|
@click="toggleLocale">
|
|
{{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
|
|
</Button>
|
|
|
|
<!-- <ConnectionStatus v-if="nostrStore.isLoggedIn" /> -->
|
|
<ConnectionStatus v-if="true" />
|
|
|
|
<!-- <template v-if="nostrStore.isLoggedIn"> -->
|
|
<template v-if="true">
|
|
<LogoutDialog :onLogout="handleLogout" />
|
|
</template>
|
|
<Button v-else variant="ghost" size="icon" @click="openLogin"
|
|
class="text-muted-foreground hover:text-foreground">
|
|
<LogIn class="h-5 w-5" />
|
|
</Button>
|
|
|
|
<!-- Mobile menu button -->
|
|
<Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
|
|
<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-[100] border-b bg-background md:hidden
|
|
[@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
|
|
<div class="space-y-1 p-4">
|
|
<!-- Add theme and language toggles to mobile menu -->
|
|
<div class="flex items-center justify-between mb-4 px-2">
|
|
<Button variant="ghost" size="icon" @click="toggleTheme">
|
|
<Sun v-if="theme === 'dark'" class="h-5 w-5" />
|
|
<Moon v-else class="h-5 w-5" />
|
|
</Button>
|
|
<Button variant="ghost" class="text-muted-foreground hover:text-foreground transition-colors"
|
|
@click="toggleLocale">
|
|
{{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
|
|
</Button>
|
|
</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">
|
|
<component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
|
|
{{ item.name }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Login Dialog -->
|
|
<Dialog v-model:open="showLoginDialog">
|
|
<DialogContent class="sm:max-w-md">
|
|
<Login @success="showLoginDialog = false" />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|