106 lines
6 KiB
HTML
106 lines
6 KiB
HTML
<header class="sticky top-0 z-50 border-b border-slate-200 bg-white">
|
|
{{ $joinPath := cond (eq .Site.Language.Lang "fr") "devenir-membre" "become-member" }}
|
|
{{ $menuLabel := cond (eq .Site.Language.Lang "fr") "Menu" "Menu" }}
|
|
<div class="mx-auto max-w-6xl px-6 py-4 lg:px-8">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Logo -->
|
|
<a href="{{ "/" | relLangURL }}" class="flex items-center gap-2 font-bold text-lg text-slate-900">
|
|
<img src='{{ "images/logo-header.png" | relURL }}' alt="TheAfriForge logo" class="h-9 w-auto object-contain" loading="eager" decoding="async">
|
|
<span>TheAfriForge</span>
|
|
</a>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="hidden md:flex items-center gap-8 text-sm font-medium">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL }}" class="text-slate-600 hover:text-slate-900 transition">{{ .Name }}</a>
|
|
{{ end }}
|
|
</nav>
|
|
|
|
<!-- Right: Language + CTA + Mobile menu -->
|
|
<div class="flex items-center gap-3">
|
|
<!-- Language -->
|
|
<div class="relative hidden md:block group">
|
|
<button class="flex items-center gap-1 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-600 hover:border-slate-300 hover:text-slate-900 transition">
|
|
{{ .Site.Language.Lang | upper }}
|
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="absolute right-0 top-full mt-1 w-40 rounded-lg border border-slate-200 bg-white shadow-lg invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all">
|
|
{{ range .Site.Languages }}
|
|
{{ $isCurrent := eq $.Site.Language.Lang .Lang }}
|
|
{{ $targetSite := index (where $.Sites "Language.Lang" .Lang) 0 }}
|
|
{{ $langURL := "/" }}
|
|
{{ if and $targetSite $.Page (not $.IsHome) }}
|
|
{{ $translation := index (where $.Page.AllTranslations "Language.Lang" .Lang) 0 }}
|
|
{{ if $translation }}
|
|
{{ $langURL = $translation.RelPermalink }}
|
|
{{ else }}
|
|
{{ $langURL = $targetSite.Home.RelPermalink }}
|
|
{{ end }}
|
|
{{ else if $targetSite }}
|
|
{{ $langURL = $targetSite.Home.RelPermalink }}
|
|
{{ end }}
|
|
{{ if $isCurrent }}
|
|
<div class="px-4 py-2 text-sm font-semibold text-green-800 bg-green-50">✓ {{ .LanguageName }}</div>
|
|
{{ else }}
|
|
<a href="{{ $langURL }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 transition">{{ .LanguageName }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<a href='{{ $joinPath | relLangURL }}' class="hidden sm:inline-flex rounded-lg bg-green-800 px-5 py-2 text-sm font-bold text-white hover:bg-green-900 transition">
|
|
{{ i18n "headerCtaMembers" }}
|
|
</a>
|
|
|
|
<details class="relative md:hidden">
|
|
<summary class="flex list-none cursor-pointer items-center gap-1 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900 transition">
|
|
{{ .Site.Language.Lang | upper }}
|
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</summary>
|
|
<div class="absolute right-0 top-full mt-1 w-44 rounded-lg border border-slate-200 bg-white shadow-lg">
|
|
{{ range .Site.Languages }}
|
|
{{ $isCurrent := eq $.Site.Language.Lang .Lang }}
|
|
{{ $targetSite := index (where $.Sites "Language.Lang" .Lang) 0 }}
|
|
{{ $langURL := "/" }}
|
|
{{ if and $targetSite $.Page (not $.IsHome) }}
|
|
{{ $translation := index (where $.Page.AllTranslations "Language.Lang" .Lang) 0 }}
|
|
{{ if $translation }}
|
|
{{ $langURL = $translation.RelPermalink }}
|
|
{{ else }}
|
|
{{ $langURL = $targetSite.Home.RelPermalink }}
|
|
{{ end }}
|
|
{{ else if $targetSite }}
|
|
{{ $langURL = $targetSite.Home.RelPermalink }}
|
|
{{ end }}
|
|
{{ if $isCurrent }}
|
|
<div class="px-4 py-2 text-sm font-semibold text-green-800 bg-green-50">✓ {{ .LanguageName }}</div>
|
|
{{ else }}
|
|
<a href="{{ $langURL }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 transition">{{ .LanguageName }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Mobile menu -->
|
|
<details class="relative md:hidden">
|
|
<summary class="flex list-none cursor-pointer items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900">
|
|
<span>{{ $menuLabel }}</span>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</summary>
|
|
<div class="absolute right-0 mt-2 w-[84vw] max-w-sm rounded-2xl border border-slate-200 bg-white p-4 shadow-xl">
|
|
<nav class="grid gap-2 text-sm font-medium">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL }}" class="rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900 transition">{{ .Name }}</a>
|
|
{{ end }}
|
|
</nav>
|
|
|
|
<a href='{{ $joinPath | relLangURL }}' class="mt-4 inline-flex w-full items-center justify-center rounded-lg bg-green-800 px-5 py-2.5 text-sm font-bold text-white hover:bg-green-900 transition">
|
|
{{ i18n "headerCtaMembers" }}
|
|
</a>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|