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([{
"url": "index.html",
"revision": "0.rpn4gsapmg"
"revision": "0.rufiaedueo"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

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

@ -53,10 +53,10 @@ const openLogin = () => {
<template>
<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 -->
<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'" />
<span class="font-semibold">{{ t('nav.title') }}</span>
</router-link>
@ -75,12 +75,15 @@ const openLogin = () => {
<!-- Theme Toggle, Language, and Auth -->
<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" />
<Moon v-else class="h-5 w-5" />
</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">
{{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
</Button>
@ -108,9 +111,22 @@ const openLogin = () => {
<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="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"
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="{
'text-foreground': $route.path === item.href
}" @click="isOpen = false">