From cd5dc008b21ada716a3a879e1bbf7bc8ef49f7c9 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 6 Sep 2025 17:47:37 +0200
Subject: [PATCH] Improve mobile navbar UX with icon navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add mobile navigation icons for Events, Market, and Chat routes
- Remove route items from mobile dropdown to reduce clutter
- Mobile dropdown now focuses on user account management only
- Remove Home route from desktop navigation (logo serves as home)
- Add active states and hover effects for mobile route icons
- Preserve chat notification badges and market preloading indicators

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/layout/Navbar.vue | 65 +++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 57ec08e..7d26e53 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 } from 'lucide-vue-next'
+import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet, MessageSquare, Activity, ShoppingCart, Store, Calendar, ShoppingBag } from 'lucide-vue-next'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import ProfileDialog from '@/components/auth/ProfileDialog.vue'
@@ -100,7 +100,7 @@ const handleLogout = async () => {
 
         <!-- Desktop Navigation -->
         <div class="hidden md:flex gap-4 lg:gap-6 xl:gap-8">
-          <router-link v-for="item in navigation" :key="item.name" :to="item.href"
+          <router-link v-for="item in navigation.filter(nav => nav.href !== '/')" :key="item.name" :to="item.href"
             class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 text-sm lg:text-base xl:text-lg relative"
             :class="{
               'text-foreground': $route.path === item.href
@@ -198,16 +198,45 @@ const handleLogout = async () => {
           <LanguageSwitcher />
         </div>
 
-        <!-- Mobile Chat Button (only show when authenticated) -->
-        <router-link v-if="auth.isAuthenticated.value" to="/chat" 
-          class="md:hidden relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors">
-          <span class="sr-only">Chat</span>
-          <MessageSquare class="h-5 w-5" />
-          <Badge v-if="totalUnreadMessages > 0" 
-                 class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
-            {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
-          </Badge>
-        </router-link>
+        <!-- Mobile Navigation Icons (only show when authenticated) -->
+        <div v-if="auth.isAuthenticated.value" class="md:hidden flex items-center gap-1">
+          <!-- Events Button -->
+          <router-link to="/events" 
+            class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
+            :class="{
+              'text-primary bg-accent': $route.path === '/events'
+            }">
+            <span class="sr-only">Events</span>
+            <Calendar class="h-5 w-5" />
+          </router-link>
+          
+          <!-- Market Button -->
+          <router-link to="/market" 
+            class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
+            :class="{
+              'text-primary bg-accent': $route.path.startsWith('/market')
+            }">
+            <span class="sr-only">Market</span>
+            <ShoppingBag class="h-5 w-5" />
+            <!-- Market preloading indicator -->
+            <div v-if="marketPreloader.isPreloading" 
+                 class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+          </router-link>
+          
+          <!-- Chat Button -->
+          <router-link to="/chat" 
+            class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
+            :class="{
+              'text-primary bg-accent': $route.path === '/chat'
+            }">
+            <span class="sr-only">Chat</span>
+            <MessageSquare class="h-5 w-5" />
+            <Badge v-if="totalUnreadMessages > 0" 
+                   class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+              {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
+            </Badge>
+          </router-link>
+        </div>
 
         <!-- Mobile menu button -->
         <Button variant="ghost" size="icon" @click="toggleMenu"
@@ -276,16 +305,8 @@ const handleLogout = async () => {
           <LanguageSwitcher />
         </div>
 
-        <router-link v-for="item in navigation.filter(nav => nav.href !== '/chat')" :key="item.name" :to="item.href"
-          class="flex items-center gap-2 px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors relative"
-          :class="{
-            'text-foreground': $route.path === item.href
-          }" @click="isOpen = false">
-          <span>{{ item.name }}</span>
-          <!-- Market preloading indicator -->
-          <div v-if="item.href === '/market' && marketPreloader.isPreloading" 
-               class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
-        </router-link>
+        <!-- Navigation routes removed from mobile dropdown for better UX -->
+        <!-- Routes are now available as icons in the top navigation -->
       </div>
     </div>