From b4e157ab5c3532a558d52ebc8db4ba493d535f45 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 15 Sep 2025 01:14:05 +0200
Subject: [PATCH] Enhance Navbar component with improved wallet button layout
 and new icon

- Added ChevronRight icon to the mobile wallet button for better visual indication of navigation.
- Adjusted button styling for improved spacing and alignment of elements, enhancing user interaction.
- Wrapped wallet icon and balance display in a div for better layout consistency.

These changes improve the overall usability and aesthetics of the Navbar component.
---
 src/components/layout/Navbar.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index b2ad46a..08ded0c 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -6,7 +6,7 @@ import { useTheme } from '@/components/theme-provider'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet, MessageSquare, Activity, ShoppingCart, Store, Calendar, ShoppingBag } from 'lucide-vue-next'
+import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet, MessageSquare, Activity, ShoppingCart, Store, Calendar, ShoppingBag, ChevronRight } from 'lucide-vue-next'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import ProfileDialog from '@/components/auth/ProfileDialog.vue'
@@ -267,10 +267,13 @@ const handleLogout = async () => {
             <!-- Mobile Wallet Balance -->
             <button
               @click="() => { router.push('/wallet'); isOpen = false }"
-              class="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded-lg hover:bg-muted/70 transition-colors w-full text-left"
+              class="flex items-center justify-between gap-2 px-3 py-2 bg-muted/50 rounded-lg hover:bg-muted/70 transition-colors w-full text-left border border-transparent hover:border-muted-foreground/20"
             >
-              <Wallet class="h-4 w-4 text-muted-foreground" />
-              <CurrencyDisplay :balance-msat="totalBalance" />
+              <div class="flex items-center gap-2">
+                <Wallet class="h-4 w-4 text-muted-foreground" />
+                <CurrencyDisplay :balance-msat="totalBalance" />
+              </div>
+              <ChevronRight class="h-4 w-4 text-muted-foreground" />
             </button>
 
             <div class="space-y-1">