From e8225446acfb276bb53d9d1c4b339c800cf2ba24 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 9 Mar 2025 14:08:55 +0100
Subject: [PATCH] refactor(ui): Enhance Navbar styling with improved text and
 hover states

- Add text-foreground class to improve color consistency
- Implement hover states for logo, theme toggle, and mobile menu button
- Simplify mobile menu backdrop filter with more concise class
- Ensure consistent text and interaction styling across navbar components
---
 src/components/layout/Navbar.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 2cd5953..4cb89b1 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -32,11 +32,11 @@ const toggleTheme = () => {
 </script>
 
 <template>
-  <nav class="w-full">
+  <nav class="w-full text-foreground">
     <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">
+        <router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
           <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>
@@ -55,7 +55,8 @@ const toggleTheme = () => {
       <!-- Theme Toggle and Language -->
       <div class="flex items-center gap-2">
         <!-- Hide theme toggle on mobile -->
-        <Button variant="ghost" size="icon" @click="toggleTheme" class="hidden sm:inline-flex">
+        <Button variant="ghost" size="icon" @click="toggleTheme" 
+          class="hidden sm:inline-flex text-foreground hover:text-foreground/90 hover:bg-accent">
           <Sun v-if="theme === 'dark'" class="h-5 w-5" />
           <Moon v-else class="h-5 w-5" />
         </Button>
@@ -66,7 +67,8 @@ const toggleTheme = () => {
         </div>
 
         <!-- Mobile menu button -->
-        <Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
+        <Button variant="ghost" size="icon" @click="toggleMenu" 
+          class="md:hidden text-foreground hover:text-foreground/90 hover:bg-accent">
           <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" />
@@ -76,12 +78,12 @@ const toggleTheme = () => {
 
     <!-- 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">
+      class="absolute left-0 right-0 top-14 z-[100] border-b bg-background/95 backdrop-blur-sm md:hidden">
       <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">
+          <Button variant="ghost" size="icon" @click="toggleTheme"
+            class="text-foreground hover:text-foreground/90 hover:bg-accent">
             <Sun v-if="theme === 'dark'" class="h-5 w-5" />
             <Moon v-else class="h-5 w-5" />
           </Button>