rebreak-monorepo/apps/marketing/app/layouts/default.vue

<template>
  <div data-layout="default" class="flex flex-col overflow-hidden bg-default text-highlighted"
    :style="{ height: vpHeight + 'px' }">
    <!-- Header sticky -->
    <header class="shrink-0 h-16 border-b border-default bg-default/95 backdrop-blur-md relative z-50">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 h-full flex items-center justify-between">
        <NuxtLink to="/" class="flex items-center gap-2" @click="menuOpen = false">
          <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
            <UIcon name="i-heroicons-shield-check" class="text-white" />
          </div>
          <span class="font-bold text-lg text-highlighted">ReBreak</span>
        </NuxtLink>

        <!-- Desktop-Nav (große Screens) -->
        <nav class="hidden md:flex items-center gap-6 text-sm text-muted">
          <NuxtLink v-for="link in navLinks" :key="link.to" :to="link.to"
            class="transition-colors"
            :class="isActive(link.to) ? 'text-highlighted font-semibold' : 'hover:text-highlighted'">
            {{ link.label }}
          </NuxtLink>
        </nav>

        <div class="flex items-center gap-2">
          <a href="https://apps.apple.com/app/rebreak" target="_blank" rel="noopener" class="hidden sm:block">
            <UButton size="sm" color="primary">{{ $t("nav.download_app") }}</UButton>
          </a>
          <!-- Hamburger (kleine Screens) -->
          <UButton class="md:hidden" color="neutral" variant="ghost" size="md"
            :icon="menuOpen ? 'i-heroicons-x-mark' : 'i-heroicons-bars-3'"
            :aria-label="menuOpen ? 'Menü schließen' : 'Menü öffnen'" @click="menuOpen = !menuOpen" />
        </div>
      </div>

      <!-- Mobile-Menü (Slide-Down aus dem Header) -->
      <Transition enter-active-class="transition duration-150 ease-out" enter-from-class="opacity-0 -translate-y-2"
        enter-to-class="opacity-100 translate-y-0" leave-active-class="transition duration-100 ease-in"
        leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-2">
        <nav v-if="menuOpen"
          class="md:hidden absolute top-16 inset-x-0 border-b border-default bg-default/98 backdrop-blur-md px-4 py-3 flex flex-col gap-1 shadow-lg">
          <NuxtLink v-for="link in navLinks" :key="link.to" :to="link.to" @click="menuOpen = false"
            class="flex items-center gap-3 px-3 py-3 rounded-xl text-sm transition-colors"
            :class="isActive(link.to) ? 'bg-elevated text-highlighted font-semibold' : 'text-muted hover:bg-elevated'">
            <UIcon :name="link.icon" class="size-5 shrink-0" />
            {{ link.label }}
          </NuxtLink>
          <a href="https://apps.apple.com/app/rebreak" target="_blank" rel="noopener" class="mt-2">
            <UButton block color="primary">{{ $t("nav.download_app") }}</UButton>
          </a>
        </nav>
      </Transition>
    </header>

    <!-- Scrollbarer Inhalt -->
    <div class="flex-1 overflow-y-auto" @click="menuOpen = false">
      <slot />

      <!-- DSGVO-Pflicht: Datenschutz + Impressum public erreichbar -->
      <footer class="border-t border-default mt-12 pb-6 pt-6 px-4">
        <div
          class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-muted">
          <p>© {{ new Date().getFullYear() }} Rebreak</p>
          <nav class="flex flex-wrap items-center gap-x-5 gap-y-2">
            <NuxtLink to="/datenschutz" class="hover:text-primary-400 transition-colors">Datenschutz</NuxtLink>
            <NuxtLink to="/impressum" class="hover:text-primary-400 transition-colors">Impressum</NuxtLink>
            <NuxtLink to="/nutzungsbedingungen" class="hover:text-primary-400 transition-colors">
              Nutzungsbedingungen
            </NuxtLink>
          </nav>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
const { height: vpHeight } = useViewportHeight();
const route = useRoute();
const { t } = useI18n();
const menuOpen = ref(false);

// Eine Nav-Quelle für Desktop-Header UND Mobile-Hamburger (keine Tabbar mehr).
const navLinks = computed(() => [
  { to: "/", icon: "i-heroicons-home", label: t('pricing.footer_home') },
  { to: "/pricing", icon: "i-heroicons-credit-card", label: t('nav.pricing') },
  { to: "/resources", icon: "i-heroicons-book-open", label: t('nav.resources') },
]);

// Menü bei Routenwechsel schließen
watch(() => route.path, () => { menuOpen.value = false; });

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