refactor: Clean up Navbar component and remove support link

- Remove the "Support" link from the Navbar.vue navigation items to streamline the menu.
- Adjust formatting in Navbar.vue for improved readability and consistency in the template structure.
- Update i18n files to remove references to the "Support" string in English, Spanish, and French locales, enhancing localization accuracy.
This commit is contained in:
padreug 2025-08-02 16:28:28 +02:00
parent 93d30c0255
commit 941b4c3ec5
5 changed files with 16 additions and 17 deletions

View file

@ -28,13 +28,12 @@ const showProfileDialog = ref(false)
const navigation = computed<NavigationItem[]>(() => [ const navigation = computed<NavigationItem[]>(() => [
{ name: t('nav.home'), href: '/' }, { name: t('nav.home'), href: '/' },
{ name: t('nav.events'), href: '/events' }, { name: t('nav.events'), href: '/events' },
{ name: t('nav.support'), href: '/support' },
]) ])
// Compute total wallet balance // Compute total wallet balance
const totalBalance = computed(() => { const totalBalance = computed(() => {
if (!auth.currentUser.value?.wallets) return 0 if (!auth.currentUser.value?.wallets) return 0
return auth.currentUser.value.wallets.reduce((total, wallet) => { return auth.currentUser.value.wallets.reduce((total, wallet) => {
return total + (wallet.balance_msat || 0) return total + (wallet.balance_msat || 0)
}, 0) }, 0)
@ -76,14 +75,16 @@ const handleLogout = async () => {
<!-- Logo and Desktop Navigation --> <!-- Logo and Desktop Navigation -->
<div class="flex items-center gap-4 lg:gap-8 xl:gap-12"> <div class="flex items-center gap-4 lg:gap-8 xl:gap-12">
<router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90"> <router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
<img src="@/assets/logo.png" alt="Logo" class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-16 lg:w-16 xl:h-20 xl:w-20" /> <img src="@/assets/logo.png" alt="Logo"
class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-16 lg:w-16 xl:h-20 xl:w-20" />
<span class="font-semibold text-base lg:text-lg xl:text-xl">{{ t('nav.title') }}</span> <span class="font-semibold text-base lg:text-lg xl:text-xl">{{ t('nav.title') }}</span>
</router-link> </router-link>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<div class="hidden md:flex gap-4 lg:gap-6 xl:gap-8"> <div class="hidden md:flex gap-4 lg:gap-6 xl:gap-8">
<router-link v-for="item in navigation" :key="item.name" :to="item.href" <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 text-sm lg:text-base xl:text-lg" :class="{ class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 text-sm lg:text-base xl:text-lg"
:class="{
'text-foreground': $route.path === item.href 'text-foreground': $route.path === item.href
}"> }">
{{ item.name }} {{ item.name }}
@ -94,7 +95,8 @@ const handleLogout = async () => {
<!-- Theme Toggle, Language, and Identity --> <!-- Theme Toggle, Language, and Identity -->
<div class="flex items-center gap-2 lg:gap-4 xl:gap-6"> <div class="flex items-center gap-2 lg:gap-4 xl:gap-6">
<!-- Wallet Balance Display --> <!-- Wallet Balance Display -->
<div v-if="auth.isAuthenticated.value" class="hidden sm:flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border"> <div v-if="auth.isAuthenticated.value"
class="hidden sm:flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border">
<Wallet class="h-4 w-4 text-muted-foreground" /> <Wallet class="h-4 w-4 text-muted-foreground" />
<CurrencyDisplay :balance-msat="totalBalance" /> <CurrencyDisplay :balance-msat="totalBalance" />
</div> </div>
@ -105,7 +107,8 @@ const handleLogout = async () => {
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" class="gap-2 lg:gap-3"> <Button variant="ghost" size="sm" class="gap-2 lg:gap-3">
<User class="h-4 w-4 lg:h-5 lg:w-5" /> <User class="h-4 w-4 lg:h-5 lg:w-5" />
<span class="max-w-24 lg:max-w-32 xl:max-w-40 truncate">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span> <span class="max-w-24 lg:max-w-32 xl:max-w-40 truncate">{{ auth.userDisplay.value?.name || 'Anonymous'
}}</span>
<Badge variant="secondary" class="text-xs lg:text-sm">Logged In</Badge> <Badge variant="secondary" class="text-xs lg:text-sm">Logged In</Badge>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -115,7 +118,7 @@ const handleLogout = async () => {
<Wallet class="h-4 w-4 text-muted-foreground" /> <Wallet class="h-4 w-4 text-muted-foreground" />
<CurrencyDisplay :balance-msat="totalBalance" /> <CurrencyDisplay :balance-msat="totalBalance" />
</div> </div>
<DropdownMenuItem @click="openProfileDialog" class="gap-2"> <DropdownMenuItem @click="openProfileDialog" class="gap-2">
<User class="h-4 w-4" /> <User class="h-4 w-4" />
Profile Profile
@ -166,8 +169,7 @@ const handleLogout = async () => {
<div class="space-y-1 p-4"> <div class="space-y-1 p-4">
<!-- Authentication in mobile menu --> <!-- Authentication in mobile menu -->
<div class="mb-4 px-2"> <div class="mb-4 px-2">
<Button v-if="!auth.isAuthenticated.value" variant="outline" size="sm" <Button v-if="!auth.isAuthenticated.value" variant="outline" size="sm" @click="openLoginDialog"
@click="openLoginDialog"
class="w-full gap-2 min-h-[44px] touch-manipulation"> class="w-full gap-2 min-h-[44px] touch-manipulation">
<User class="h-4 w-4" /> <User class="h-4 w-4" />
Login Login
@ -178,19 +180,20 @@ const handleLogout = async () => {
<span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span> <span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge> <Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
</div> </div>
<!-- Mobile Wallet Balance --> <!-- Mobile Wallet Balance -->
<div class="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded-lg"> <div class="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded-lg">
<Wallet class="h-4 w-4 text-muted-foreground" /> <Wallet class="h-4 w-4 text-muted-foreground" />
<CurrencyDisplay :balance-msat="totalBalance" /> <CurrencyDisplay :balance-msat="totalBalance" />
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<Button variant="ghost" size="sm" @click="openProfileDialog" 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" /> <User class="h-4 w-4" />
Profile Profile
</Button> </Button>
<Button variant="ghost" size="sm" @click="() => router.push('/my-tickets')" class="w-full justify-start gap-2"> <Button variant="ghost" size="sm" @click="() => router.push('/my-tickets')"
class="w-full justify-start gap-2">
<Ticket class="h-4 w-4" /> <Ticket class="h-4 w-4" />
My Tickets My Tickets
</Button> </Button>
@ -225,7 +228,7 @@ const handleLogout = async () => {
<!-- Login Dialog --> <!-- Login Dialog -->
<LoginDialog v-model:is-open="showLoginDialog" /> <LoginDialog v-model:is-open="showLoginDialog" />
<!-- Profile Dialog --> <!-- Profile Dialog -->
<ProfileDialog v-model:is-open="showProfileDialog" /> <ProfileDialog v-model:is-open="showProfileDialog" />
</nav> </nav>

View file

@ -6,7 +6,6 @@ const messages: LocaleMessages = {
title: 'Virtual Realm', title: 'Virtual Realm',
directory: 'Directory', directory: 'Directory',
faq: 'FAQ', faq: 'FAQ',
support: 'Support',
events: 'Events', events: 'Events',
login: 'Login', login: 'Login',
logout: 'Logout' logout: 'Logout'

View file

@ -6,7 +6,6 @@ const messages: LocaleMessages = {
home: 'Inicio', home: 'Inicio',
directory: 'Directorio', directory: 'Directorio',
faq: 'Preguntas Frecuentes', faq: 'Preguntas Frecuentes',
support: 'Soporte',
events: 'Eventos', events: 'Eventos',
login: 'Iniciar Sesión', login: 'Iniciar Sesión',
logout: 'Cerrar Sesión' logout: 'Cerrar Sesión'

View file

@ -6,7 +6,6 @@ const messages: LocaleMessages = {
home: 'Accueil', home: 'Accueil',
directory: 'Répertoire', directory: 'Répertoire',
faq: 'FAQ', faq: 'FAQ',
support: 'Support',
events: 'Événements', events: 'Événements',
login: 'Connexion', login: 'Connexion',
logout: 'Déconnexion' logout: 'Déconnexion'

View file

@ -4,7 +4,6 @@ export interface LocaleMessages {
home: string home: string
directory: string directory: string
faq: string faq: string
support: string
events: string events: string
login: string login: string
logout: string logout: string