big milestone 2!!!

src/components/layout/Navbar.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Menu, X, Sun, Moon, Zap, MessageSquareText } from 'lucide-vue-next'
+import { Menu, X, Sun, Moon, Zap, MessageSquareText, LogIn, LogOut } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { useTheme } from '@/components/theme-provider'
+import { useNostrStore } from '@/stores/nostr'
+import { useRouter } from 'vue-router'
 
 const { t, locale } = useI18n()
 const { theme, setTheme } = useTheme()
+const nostrStore = useNostrStore()
+const router = useRouter()
 const isOpen = ref(false)
 
 const navigation = computed(() => [
@@ -31,6 +35,14 @@ const toggleLocale = () => {
   // Store the preference
   localStorage.setItem('locale', newLocale)
 }
+
+const handleAuth = () => {
+  if (nostrStore.isLoggedIn) {
+    nostrStore.logout()
+  } else {
+    router.push('/support')
+  }
+}
 </script>
 
 <template>
@@ -55,7 +67,7 @@ const toggleLocale = () => {
         </div>
       </div>
 
-      <!-- Theme Toggle and Language -->
+      <!-- Theme Toggle, Language, and Auth -->
       <div class="flex items-center gap-2">
         <Button variant="ghost" size="icon" @click="toggleTheme">
           <Sun v-if="theme === 'dark'" class="h-5 w-5" />
@@ -67,6 +79,11 @@ const toggleLocale = () => {
           {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
         </Button>
 
+        <Button variant="ghost" size="icon" @click="handleAuth" class="text-muted-foreground hover:text-foreground">
+          <LogIn v-if="!nostrStore.isLoggedIn" class="h-5 w-5" />
+          <LogOut v-else class="h-5 w-5" />
+        </Button>
+
         <!-- Mobile menu button -->
         <Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
           <span class="sr-only">Open main menu</span>