arboretum/packages/site/src/components/AppHeader.vue

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { REPO } from '../lib/links';
import LangToggle from './LangToggle.vue';
import ThemeToggle from './ThemeToggle.vue';
import IconGitea from './icons/IconGitea.vue';

const { t } = useI18n();

/**
 * Navigation du site. `tier` = largeur à partir de laquelle le lien apparaît dans la barre :
 *   1 = dès 900px, 2 = à partir de 1024px, 3 = à partir de 1180px.
 *
 * Les huit liens ne tiennent qu'au-delà de ~1180px. En dessous, la barre flex les compressait au lieu
 * de les masquer, cassant « Start project », « Git services » et « How it works » sur deux ou trois
 * lignes, chevauchant le logo et expulsant le bouton Gitea. Le menu compact, lui, montre toujours la
 * liste complète : aucun lien n'est perdu, il change juste de place.
 */
const navLinks = [
  { href: '#features', key: 'navFeatures', tier: 1 },
  { href: '#workspace', key: 'navWorkspace', tier: 1 },
  { href: '#launch', key: 'navLaunch', tier: 2 },
  { href: '#remotegit', key: 'navRemoteGit', tier: 3 },
  { href: '#download', key: 'navDownload', tier: 1 },
  { href: '#how', key: 'navHow', tier: 3 },
  { href: '#security', key: 'navSecurity', tier: 2 },
  { href: '#faq', key: 'navFaq', tier: 1 },
] as const;

/** Tailwind ne génère que des classes littérales : la table évite toute classe construite à la volée. */
const TIER_CLASS: Record<number, string> = {
  1: '',
  2: 'hidden min-[1024px]:inline',
  3: 'hidden min-[1180px]:inline',
};

const menuOpen = ref(false);
const closeMenu = (): void => {
  menuOpen.value = false;
};

function onKey(e: KeyboardEvent): void {
  if (e.key === 'Escape') closeMenu();
}
onMounted(() => window.addEventListener('keydown', onKey));
onBeforeUnmount(() => window.removeEventListener('keydown', onKey));
</script>

<template>
  <header class="sticky top-0 z-50 border-b border-border-soft bg-surface-0/72 backdrop-blur-[14px]">
    <div class="mx-auto flex h-16 max-w-[1200px] items-center gap-4 px-6">
      <!-- shrink-0 : le logo ne doit jamais être rogné ni recouvert par la nav. -->
      <a href="#top" class="flex shrink-0 items-center gap-2.5 text-fg no-underline" @click="closeMenu">
        <img
          src="/assets/arboretum-mark.png"
          alt="Arboretum"
          width="28"
          height="28"
          class="block h-7 w-7 object-contain"
        />
        <span class="font-mono text-[17px] font-semibold tracking-[-0.01em]">Arboretum</span>
      </a>

      <nav class="hidden min-w-0 flex-1 items-center justify-center gap-6 min-[900px]:flex min-[1180px]:gap-[30px]">
        <a
          v-for="link in navLinks"
          :key="link.href"
          :href="link.href"
          class="shrink-0 whitespace-nowrap text-[14.5px] text-fg-muted no-underline transition-colors hover:text-fg"
          :class="TIER_CLASS[link.tier]"
        >
          {{ t(link.key) }}
        </a>
      </nav>

      <div class="ml-auto flex shrink-0 items-center gap-2 min-[900px]:ml-0 min-[900px]:gap-3.5">
        <ThemeToggle />
        <LangToggle />
        <!-- Sous 900px, Gitea vit dans le panneau : à 390px, logo + 3 contrôles + menu débordaient et
             le bouton menu se retrouvait tronqué au bord de l'écran. -->
        <a
          :href="REPO"
          target="_blank"
          rel="noopener"
          aria-label="Gitea"
          class="hidden items-center gap-[7px] rounded-lg border border-border px-[13px] py-[7px] text-[13.5px] font-medium text-fg-muted no-underline transition-colors hover:border-accent hover:text-accent min-[900px]:inline-flex"
        >
          <IconGitea :size="16" />
          <!-- Libellé masqué tant que la barre est serrée : l'icône suffit, l'aria-label reste. -->
          <span class="hidden min-[1180px]:inline">Gitea</span>
        </a>

        <button
          type="button"
          class="inline-flex items-center justify-center rounded-lg border border-border p-[7px] text-fg-muted transition-colors hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70 min-[900px]:hidden"
          :aria-label="t('navMenu')"
          :aria-expanded="menuOpen"
          aria-controls="site-mobile-nav"
          @click="menuOpen = !menuOpen"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
            <template v-if="menuOpen">
              <path d="M18 6 6 18" />
              <path d="m6 6 12 12" />
            </template>
            <template v-else>
              <path d="M4 7h16" />
              <path d="M4 12h16" />
              <path d="M4 17h16" />
            </template>
          </svg>
        </button>
      </div>
    </div>

    <!-- Panneau compact sous 900px : liste complète, une entrée par ligne, refermée au choix d'un lien. -->
    <nav
      v-if="menuOpen"
      id="site-mobile-nav"
      class="border-t border-border-soft bg-surface-0/95 px-6 py-2 backdrop-blur-[14px] min-[900px]:hidden"
    >
      <a
        v-for="link in navLinks"
        :key="link.href"
        :href="link.href"
        class="block py-2 text-[15px] text-fg-muted no-underline transition-colors hover:text-fg"
        @click="closeMenu"
      >
        {{ t(link.key) }}
      </a>
      <a
        :href="REPO"
        target="_blank"
        rel="noopener"
        class="mt-1 flex items-center gap-2 border-t border-border-soft py-2.5 text-[15px] text-fg-muted no-underline transition-colors hover:text-accent"
        @click="closeMenu"
      >
        <IconGitea :size="16" />
        Gitea
      </a>
    </nav>
  </header>
</template>