shooting-event/frontend/src/components/AppHeader.vue

<template>
  <header class="masthead">
    <div class="masthead-main">
      <div class="masthead-brand">
        <picture>
          <source srcset="/logo.svg" type="image/svg+xml" />
          <img class="masthead-logo" src="/logo.png" :alt="competitionTitle" />
        </picture>
        <p class="masthead-subtitle">{{ t('subtitle') }}</p>
      </div>

      <div class="masthead-controls">
        <div ref="controlsRoot" class="controls-popup-anchor">
          <div class="control-toggle-row">
            <button class="control-toggle-btn" type="button" :aria-expanded="controlsOpen ? 'true' : 'false'" @click="toggleControls">
              <span>{{ optionsLabel }}</span>
              <span class="control-toggle-meta">{{ modeShort }} · {{ languageShort }}</span>
            </button>
            <button
              class="control-icon-btn"
              type="button"
              :class="{ active: isFullscreen }"
              :aria-label="fullscreenActionLabel"
              :title="fullscreenActionLabel"
              @click="toggleFullscreen"
            >
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path
                  v-if="!isFullscreen"
                  d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  v-else
                  d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>

          <Transition name="controls-reveal">
            <div v-if="controlsOpen" class="controls-grid controls-popover">
              <div class="control-box">
                <p class="control-label">{{ t('labels.mode') }}</p>
                <div class="language-switcher mode-switcher">
                  <button class="lang-btn" :class="{ active: mode === 'view' }" @click="changeMode('view')">{{ t('viewMode') }}</button>
                  <button class="lang-btn" :class="{ active: mode === 'live' }" @click="changeMode('live')">{{ t('liveMode') }}</button>
                  <button class="lang-btn" :class="{ active: mode === 'admin' }" @click="changeMode('admin')">{{ t('adminMode') }}</button>
                </div>
              </div>

              <div class="control-box">
                <p class="control-label">{{ t('labels.language') }}</p>
                <div class="language-switcher">
                  <button class="lang-btn" :class="{ active: language === 'ar' }" @click="changeLanguage('ar')">العربية</button>
                  <button class="lang-btn" :class="{ active: language === 'en' }" @click="changeLanguage('en')">English</button>
                </div>
              </div>
            </div>
          </Transition>
        </div>
        <div class="status-row">
          <div class="live-badge">{{ modeStatusLabel }}</div>
          <div class="server-time" v-if="serverTime">{{ t('labels.lastSync') }}: {{ serverTime }}</div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'

const props = defineProps({
  t: { type: Function, required: true },
  competitionTitle: { type: String, required: true },
  mode: { type: String, required: true },
  language: { type: String, required: true },
  serverTime: { type: String, default: '' },
  isFullscreen: { type: Boolean, default: false },
})

const emit = defineEmits(['change-mode', 'change-language', 'toggle-fullscreen'])

const controlsOpen = ref(false)
const controlsRoot = ref(null)

const optionsLabel = computed(() => (props.language === 'ar' ? 'خيارات' : 'Options'))
const modeShort = computed(() => {
  if (props.mode === 'view') return props.language === 'ar' ? 'عرض' : 'View'
  if (props.mode === 'live') return props.language === 'ar' ? 'حي' : 'Live'
  return props.language === 'ar' ? 'إدارة' : 'Admin'
})
const languageShort = computed(() => (props.language === 'ar' ? 'AR' : 'EN'))
const fullscreenActionLabel = computed(() => (props.isFullscreen ? props.t('actions.exitFullscreen') : props.t('actions.enterFullscreen')))
const modeStatusLabel = computed(() => {
  if (props.mode === 'view') return '● ' + props.t('labels.liveTracker')
  if (props.mode === 'live') return '● ' + props.t('liveMode')
  return props.t('adminPanel')
})

function toggleControls() {
  controlsOpen.value = !controlsOpen.value
}

function changeMode(nextMode) {
  emit('change-mode', nextMode)
  controlsOpen.value = false
}

function changeLanguage(nextLanguage) {
  emit('change-language', nextLanguage)
  controlsOpen.value = false
}

function toggleFullscreen() {
  emit('toggle-fullscreen')
}

function onGlobalPointerDown(event) {
  if (!controlsOpen.value) return
  const root = controlsRoot.value
  if (root && !root.contains(event.target)) controlsOpen.value = false
}

function onGlobalKeyDown(event) {
  if (event.key === 'Escape') controlsOpen.value = false
}

onMounted(() => {
  window.addEventListener('pointerdown', onGlobalPointerDown)
  window.addEventListener('keydown', onGlobalKeyDown)
})

onBeforeUnmount(() => {
  window.removeEventListener('pointerdown', onGlobalPointerDown)
  window.removeEventListener('keydown', onGlobalKeyDown)
})
</script>