botfights/frontend/src/components/NavBar.vue

<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import PixelGlove from './PixelGlove.vue'
import { useNostr } from '../composables/useNostr'
import { useOnlineStatus } from '../composables/useOnlineStatus'

const { bot, isLoggedIn } = useNostr()
const { isOnline } = useOnlineStatus()
const route = useRoute()
const isMenuOpen = ref(false)

const links = [
  { to: '/join', label: 'FIGHT!' },
  { to: '/fight-card', label: 'FIGHT CARD' },
  { to: '/arena', label: 'WATCH' },
  { to: '/feed', label: 'FEED' },
  { to: '/tournaments', label: 'TOURNEYS' },
  { to: '/leaderboard', label: 'RANKINGS' },
  { to: '/docs', label: 'DOCS' },
]

const bottomNav = [
  { to: '/join', label: 'FIGHT', icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
  { to: '/arena', label: 'WATCH', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' },
  { to: '/feed', label: 'FEED', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z' },
  { to: '/leaderboard', label: 'RANKS', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
]
</script>

<template>
  <nav class="border-b border-border bg-surface/90 backdrop-blur-md sticky top-0 z-50">
    <div class="px-6 h-16 flex items-center justify-between">
      <RouterLink to="/" class="flex items-center gap-2 group">
        <span class="flex items-center gap-0.5" style="transform: rotate(-10deg)">
          <PixelGlove :size="18" />
          <PixelGlove :size="18" flip />
        </span>
        <span class="font-display font-black text-neon-pink text-lg tracking-widest glow-pink">
          BOTFIGHTS
        </span>
        <span
          class="w-2 h-2 rounded-full transition-colors"
          :class="isOnline ? 'bg-green-400' : 'bg-red-400 animate-pulse'"
          :title="isOnline ? 'Online' : 'Offline'"
        />
        <span class="font-glitch text-[9px] text-neon-cyan/80 tracking-[0.2em] -rotate-12 -ml-0.5 select-none">BETA</span>
      </RouterLink>

      <div class="hidden md:flex items-center gap-6">
        <RouterLink
          v-for="link in links"
          :key="link.to"
          :to="link.to"
          class="text-xs font-display font-bold text-text-secondary tracking-wider
                 hover:text-neon-cyan transition-colors duration-200"
        >
          {{ link.label }}
        </RouterLink>
        <RouterLink
          v-if="isLoggedIn && bot"
          :to="`/bot/${bot.name}`"
          class="text-xs font-display font-bold text-neon-cyan tracking-wider
                 hover:text-neon-pink transition-colors duration-200"
        >
          {{ bot.name.toUpperCase() }}
        </RouterLink>
      </div>

      <button
        class="md:hidden text-text-secondary hover:text-neon-cyan transition-colors"
        @click="isMenuOpen = !isMenuOpen"
      >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            v-if="!isMenuOpen"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
          <path
            v-else
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div v-if="isMenuOpen" class="md:hidden absolute left-0 right-0 top-full border-t border-border px-6 py-4 space-y-4 bg-surface/95 backdrop-blur-md z-50">
      <RouterLink
        v-for="link in links"
        :key="link.to"
        :to="link.to"
        class="block text-sm font-display font-bold text-text-secondary tracking-wider
               hover:text-neon-cyan transition-colors"
        @click="isMenuOpen = false"
      >
        {{ link.label }}
      </RouterLink>
      <RouterLink
        v-if="isLoggedIn && bot"
        :to="`/bot/${bot.name}`"
        class="block text-sm font-display font-bold text-neon-cyan tracking-wider"
        @click="isMenuOpen = false"
      >
        {{ bot.name.toUpperCase() }}
      </RouterLink>
    </div>
  </nav>

  <!-- Offline banner -->
  <div
    v-if="!isOnline"
    class="fixed top-16 left-0 right-0 z-40 bg-red-500/90 backdrop-blur-sm text-center py-1.5 font-pixel text-[10px] text-white tracking-wider"
  >
    OFFLINE — RECONNECTING...
  </div>

  <!-- Mobile bottom nav -->
  <nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-surface/95 backdrop-blur-md safe-area-bottom">
    <div class="flex items-stretch justify-around h-14">
      <RouterLink
        v-for="item in bottomNav"
        :key="item.to"
        :to="item.to"
        class="flex flex-col items-center justify-center gap-0.5 min-w-[56px] min-h-[44px] transition-colors"
        :class="route.path === item.to ? 'text-neon-cyan' : 'text-text-muted'"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path :d="item.icon" />
        </svg>
        <span class="text-[8px] font-display font-bold tracking-wider">{{ item.label }}</span>
      </RouterLink>
    </div>
  </nav>
</template>