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

refactor(ui): Enhance Navbar styling with improved text and hover states

Browse source 
- 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
This commit is contained in:
padreug 2025-03-09 14:08:55 +01:00
parent ecc85ba98b
commit e8225446ac
1 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,11 +32,11 @@ const toggleTheme = () => {
</script> </script>
<template> <template>
<nav class="w-full"> <nav class="w-full text-foreground">
<div class="flex items-center justify-between px-4 md:px-0"> <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 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'" /> <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>
@ -55,7 +55,8 @@ const toggleTheme = () => {
<!-- Theme Toggle and Language --> <!-- Theme Toggle and Language -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- Hide theme toggle on mobile --> <!-- 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" /> <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>
@ -66,7 +67,8 @@ const toggleTheme = () => {
</div> </div>
<!-- Mobile menu button --> <!-- 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> <span class="sr-only">Open main menu</span>
<Menu v-if="!isOpen" class="h-5 w-5" /> <Menu v-if="!isOpen" class="h-5 w-5" />
<X v-else class="h-5 w-5" /> <X v-else class="h-5 w-5" />
@ -76,12 +78,12 @@ const toggleTheme = () => {
<!-- Mobile menu --> <!-- Mobile menu -->
<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/95 backdrop-blur-sm md:hidden">
[@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
<div class="space-y-1 p-4"> <div class="space-y-1 p-4">
<!-- Add theme and language toggles to mobile menu --> <!-- Add theme and language toggles to mobile menu -->
<div class="flex items-center justify-between mb-4 px-2"> <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" /> <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>