pipeline
52 lines
2.9 KiB
HTML
52 lines
2.9 KiB
HTML
{{- /* nav.html — primary navigation built from pages with showInNav: true,
|
|
ordered by weight. Desktop = inline list; mobile = Alpine.js toggle. */ -}}
|
|
{{- $current := . -}}
|
|
{{- $navPages := sort (where .Site.Pages "Params.showInNav" true) "Weight" -}}
|
|
{{- $noCtaSlugs := slice "faq" "responsible-gambling" "terms" "privacy-policy" "cookie-policy" "affiliate-disclosure" "about" "editorial-policy" -}}
|
|
{{- $hideCta := or $current.Params.hideCta (in $noCtaSlugs $current.Slug) (eq $current.Section "authors") -}}
|
|
|
|
{{/* Desktop — min-w-0 lets the nav shrink inside the flex row; overflow-x-auto
|
|
keeps a long section list on one line and scrollable instead of pushing the
|
|
header past the viewport. */}}
|
|
<nav aria-label="{{ i18n "primaryNavigation" }}" class="hidden min-w-0 flex-1 lg:block">
|
|
<ul class="nav-scroll flex items-center gap-1 overflow-x-auto whitespace-nowrap">
|
|
{{- range $navPages -}}
|
|
{{- $active := eq $current.RelPermalink .RelPermalink -}}
|
|
<li class="shrink-0">
|
|
<a href="{{ .RelPermalink }}" class="nav-link{{ if $active }} nav-link-active{{ end }}"{{ if $active }} aria-current="page"{{ end }}>{{ .LinkTitle }}</a>
|
|
</li>
|
|
{{- end -}}
|
|
</ul>
|
|
</nav>
|
|
|
|
{{/* Mobile — native <details> so the menu works with NO JavaScript; Alpine adds
|
|
escape-to-close and click-outside-to-close when available. */}}
|
|
<details class="group relative lg:hidden"
|
|
x-data="{ open: false }"
|
|
x-bind:open="open"
|
|
@toggle="open = $event.target.open"
|
|
@keydown.escape.window="open = false"
|
|
@click.outside="open = false">
|
|
<summary class="inline-flex cursor-pointer list-none items-center justify-center rounded-md p-2 text-secondary hover:bg-secondary/5 [&::-webkit-details-marker]:hidden"
|
|
aria-controls="mobile-menu" aria-label="{{ i18n "toggleMenu" }}">
|
|
<svg class="h-6 w-6 group-open:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg class="hidden h-6 w-6 group-open:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</summary>
|
|
|
|
<div id="mobile-menu"
|
|
class="absolute inset-x-0 top-16 z-40 max-h-[calc(100vh-4rem)] overflow-y-auto border-b border-secondary/10 bg-white p-4 shadow-lg">
|
|
<ul class="flex flex-col gap-1">
|
|
{{- range $navPages -}}
|
|
<li><a href="{{ .RelPermalink }}" class="nav-link block">{{ .LinkTitle }}</a></li>
|
|
{{- end -}}
|
|
{{ if not $hideCta }}
|
|
<li class="pt-3">{{ partial "cta-button.html" (dict "page" $current "text" (i18n "playNow") "block" true) }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</details>
|