From 2d5c395d6cfb7aa0a2dd5c7dd6fd6c905c3f8fd7 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 9 Aug 2025 23:41:19 +0200
Subject: [PATCH] feat: Add mobile chat button to Navbar for authenticated
 users

- Introduce a mobile chat button in the Navbar that is only visible to authenticated users, enhancing accessibility to chat features on mobile devices.
- Include a notification badge to display the count of unread messages, improving user engagement and awareness of new messages.
---
 src/components/layout/Navbar.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 1c887da..baf438b 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -175,6 +175,17 @@ 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-red-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+            {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
+          </Badge>
+        </router-link>
+
         <!-- Mobile menu button -->
         <Button variant="ghost" size="icon" @click="toggleMenu"
           class="md:hidden text-foreground hover:text-foreground/90 hover:bg-accent">