hms-licht-ton/frontend/components/AppHeader.vue

<template>
  <header class="hms-header" role="banner">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between" :style="{ height: 'var(--header-height)' }">
        <NuxtLink to="/" class="flex items-center gap-2" style="color: var(--text)" aria-label="HMS Licht & Ton Startseite">
          <HmsLogo :size="40" />
          <div class="hidden sm:block leading-tight">
            <div class="font-bold text-base" style="color: var(--text)">HMS Licht & Ton</div>
            <div class="text-xs" style="color: var(--secondary)">Veranstaltungstechnik</div>
          </div>
        </NuxtLink>
        <nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Hauptnavigation">
          <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
            class="hms-nav-btn px-4 py-2 rounded-lg text-sm font-medium"
            :style="isActive(item.to) ? { color: 'var(--color-accent)', background: 'var(--color-accent-light)' } : { color: 'var(--text-muted)' }"
            :aria-current="isActive(item.to) ? 'page' : undefined">
            {{ item.label }}
          </NuxtLink>
          <NuxtLink to="/warenkorb" class="hms-btn hms-btn-primary text-sm ml-2 px-4 py-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            Warenkorb
          </NuxtLink>
        </nav>
        <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 rounded-lg" :style="{ color: 'var(--text-muted)' }" :aria-expanded="mobileMenuOpen" aria-label="Menü öffnen/schließen">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path v-if="!mobileMenuOpen" 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>
    <transition name="mobile-menu">
      <nav v-if="mobileMenuOpen" id="mobile-menu" class="md:hidden border-t" :style="{ borderColor: 'var(--border)', background: 'var(--panel)' }" role="navigation" aria-label="Mobile Navigation">
        <div class="px-4 py-3 space-y-1">
          <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to" @click="mobileMenuOpen = false"
            class="hms-nav-btn block w-full text-left px-4 py-3 rounded-lg text-sm font-medium"
            :style="isActive(item.to) ? { color: 'var(--color-accent)', background: 'var(--color-accent-light)' } : { color: 'var(--text-muted)' }">
            {{ item.label }}
          </NuxtLink>
          <NuxtLink to="/warenkorb" @click="mobileMenuOpen = false" class="block w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-white" style="background: var(--color-accent)">🛒 Warenkorb</NuxtLink>
        </div>
      </nav>
    </transition>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const mobileMenuOpen = ref(false)

const navItems = [
  { label: 'Home', to: '/' },
  { label: 'Referenzen', to: '/referenzen' },
  { label: 'Mietkatalog', to: '/mietkatalog' },
  { label: 'Kontakt', to: '/kontakt' }
]

function isActive(to: string): boolean {
  if (to === '/') return route.path === '/'
  return route.path.startsWith(to)
}
</script>