From 9aeff9ddbbc031cf438fdc4b6df9c6fb2a537f99 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 15 Feb 2025 02:40:21 +0100
Subject: [PATCH] improve navbar UI

---
 dev-dist/sw.js                   |  2 +-
 src/components/layout/Navbar.vue | 30 +++++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 920f5f9..0a755cc 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -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"), {
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index bb3a831..687fddb 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -53,12 +53,12 @@ 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>
+          <span class="font-semibold">{{ t('nav.title') }}</span>
         </router-link>
 
         <!-- Desktop Navigation -->
@@ -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">