padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve navbar UI

Browse source
This commit is contained in:
padreug 2025-02-15 02:40:21 +01:00
parent 074a1fc534
commit 9aeff9ddbb
2 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev-dist/sw.js
View file

@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
*/ */
workbox.precacheAndRoute([{ workbox.precacheAndRoute([{
"url": "index.html", "url": "index.html",
"revision": "0.rpn4gsapmg" "revision": "0.rufiaedueo"
}], {}); }], {});
workbox.cleanupOutdatedCaches(); workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

30
src/components/layout/Navbar.vue
View file

@ -53,12 +53,12 @@ const openLogin = () => {
<template> <template>
<nav class="w-full"> <nav class="w-full">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between px-4 md:px-0">
<!-- Logo and Desktop Navigation --> <!-- Logo and Desktop Navigation -->
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<router-link to="/" class="flex ml-4 items-center gap-2"> <router-link to="/" class="flex items-center gap-2">
<Zap class="h-6 w-6" :class="theme === 'dark' ? 'text-orange-400' : 'text-fuchsia-600'" /> <Zap class="h-6 w-6" :class="theme === 'dark' ? 'text-orange-400' : 'text-fuchsia-600'" />
<span class=" font-semibold">{{ t('nav.title') }}</span> <span class="font-semibold">{{ t('nav.title') }}</span>
</router-link> </router-link>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
@ -75,12 +75,15 @@ const openLogin = () => {
<!-- Theme Toggle, Language, and Auth --> <!-- Theme Toggle, Language, and Auth -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button variant="ghost" size="icon" @click="toggleTheme"> <!-- 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" /> <Sun v-if="theme === 'dark'" class="h-5 w-5" />
<Moon v-else class="h-5 w-5" /> <Moon v-else class="h-5 w-5" />
</Button> </Button>
<Button variant="ghost" class="text-muted-foreground hover:text-foreground transition-colors" <!-- Hide language toggle on mobile -->
<Button variant="ghost"
class="text-muted-foreground hover:text-foreground transition-colors hidden sm:inline-flex"
@click="toggleLocale"> @click="toggleLocale">
{{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }} {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
</Button> </Button>
@ -108,9 +111,22 @@ const openLogin = () => {
<div v-show="isOpen" <div v-show="isOpen"
class="absolute left-0 right-0 top-14 z-[100] border-b bg-background md:hidden 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"> [@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
<div class="container space-y-1 py-3"> <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" <router-link v-for="item in navigation" :key="item.name" :to="item.href"
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2" class="flex items-center gap-2 px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors"
:class="{ :class="{
'text-foreground': $route.path === item.href 'text-foreground': $route.path === item.href
}" @click="isOpen = false"> }" @click="isOpen = false">