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

Enhance Navbar component with improved wallet button layout and new icon

Browse source 
- 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.
This commit is contained in:
padreug 2025-09-15 01:14:05 +02:00
parent cf994a2930
commit b4e157ab5c
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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"
>
<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">