mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 00:16:31 +00:00
George Cushen
ef8ed449c7
Migrate site.Data → hugo.Data (42 occurrences), site.IsMultiLingual → hugo.IsMultilingual, and site.AllPages → hugo.Sites nested range. Simplify Netlify redirects template to use pre-processed aliases instead of relLangURL per gohugoio/hugo#14408.
230 lines
9.6 KiB
HTML
230 lines
9.6 KiB
HTML
{{ $branding := partialCached "functions/get_branding" . "branding" }}
|
|
{{ $logo := partialCached "functions/get_logo" (dict "constraint" "max_height" "size" 36) "navbar_logo" }}
|
|
{{- $show_logo := site.Params.hugoblox.header.show_logo | default true -}}
|
|
{{- $show_title := site.Params.hugoblox.header.show_title | default true -}}
|
|
{{- $navbar_title := site.Params.hugoblox.header.title | default $branding.name -}}
|
|
<header id="site-header" class="header">
|
|
<nav class="navbar px-3 flex justify-start">
|
|
<div class="order-0 h-full">
|
|
<!-- Brand -->
|
|
<a class="navbar-brand" href="{{ site.Home.RelPermalink }}" title="{{ $branding.site_title }}">
|
|
{{/* Auto-detect logo from assets/media/logo.{svg,png} */}}
|
|
{{ if $show_logo }}
|
|
{{ with $logo.resource }}
|
|
{{ if $logo.is_svg }}
|
|
{{- .Content | safeHTML -}}
|
|
{{ else }}
|
|
<img
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
class=""
|
|
width="{{ .Width }}"
|
|
height="{{ .Height }}"
|
|
src="{{ .RelPermalink }}"
|
|
alt="{{ $branding.name }}" />
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{/* Display brand name */}}
|
|
{{ if $show_title }}{{ $navbar_title }}{{ end }}
|
|
</a>
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<input id="nav-toggle" type="checkbox" class="hidden" />
|
|
<label
|
|
for="nav-toggle"
|
|
class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--hb-color-header-fg)] lg:order-1">
|
|
<svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
|
|
<title>Open Menu</title>
|
|
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
|
|
</svg>
|
|
<svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
|
|
<title>Close Menu</title>
|
|
<polygon
|
|
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
|
|
transform="rotate(45 10 10)"></polygon>
|
|
</svg>
|
|
</label>
|
|
<!-- /Mobile menu -->
|
|
|
|
<!-- Main menu -->
|
|
{{ $align_menu := site.Params.hugoblox.header.align | default "center" }}
|
|
<ul
|
|
id="nav-menu"
|
|
class="navbar-nav order-3 hidden lg:flex w-full pb-6 lg:order-1 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8 justify-start
|
|
{{ if in (slice "l" "left") $align_menu }}mr-auto ml-6{{ else if (in (slice "r" "right") $align_menu) }}ml-auto mr-6{{end}}">
|
|
{{ $currentPage := . }}
|
|
{{ range site.Menus.main }}
|
|
{{ $menuURL := .URL | absLangURL }}
|
|
{{ $pageURL:= $currentPage.Permalink | absLangURL }}
|
|
{{ $active := eq $menuURL $pageURL }}
|
|
{{ if .HasChildren }}
|
|
<li class="nav-item nav-dropdown group relative">
|
|
<span
|
|
role="button"
|
|
tabindex="0"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
class="nav-link cursor-pointer select-none {{ range .Children }}
|
|
{{ $childURL := .URL | absLangURL }}
|
|
{{ $active := eq $childURL $pageURL }}
|
|
{{ if $active }}active{{ end }}
|
|
{{ end }} inline-flex items-center">
|
|
{{ .Name }}
|
|
<svg class="h-4 w-4 fill-current inline-block" viewBox="0 0 20 20">
|
|
<path
|
|
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
|
</svg>
|
|
</span>
|
|
<ul
|
|
class="nav-dropdown-list lg:group-hover:visible lg:group-hover:opacity-100">
|
|
{{ range .Children }}
|
|
{{ $childURL := .URL | absLangURL }}
|
|
{{ $active := eq $childURL $pageURL }}
|
|
{{ $url := "" }}
|
|
{{- if findRE `^#` .URL -}}
|
|
{{- if not $.IsHome -}}
|
|
{{- $url = site.Home.RelPermalink -}}
|
|
{{- end }}
|
|
{{- $url = .URL -}}
|
|
{{- else -}}
|
|
{{- $url = .URL | relLangURL -}}
|
|
{{- end -}}
|
|
<li class="nav-dropdown-item">
|
|
<a
|
|
class="nav-dropdown-link {{ if $active }}active{{- end -}}"
|
|
{{ if findRE `^http` .URL }}
|
|
target="_blank" rel="noopener"
|
|
{{ end }}
|
|
href="{{$url}}">
|
|
{{ .Name }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</li>
|
|
{{ else }}
|
|
{{ $url := "" }}
|
|
{{- if findRE `^#` .URL -}}
|
|
{{- if not $.IsHome -}}
|
|
{{- $url = site.Home.RelPermalink -}}
|
|
{{- end }}
|
|
{{- $url = .URL -}}
|
|
{{- else -}}
|
|
{{- $url = .URL | relLangURL -}}
|
|
{{- end -}}
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link {{ if $active }}active{{- end -}}"
|
|
{{ if findRE `^http` .URL }}
|
|
target="_blank" rel="noopener"
|
|
{{ end }}
|
|
href="{{$url}}"
|
|
>{{ .Name }}</a
|
|
>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if site.Params.hugoblox.header.cta.enable }}
|
|
<li class="mt-4 inline-block lg:hidden">
|
|
<a
|
|
class=""
|
|
href="{{ site.Params.hugoblox.header.cta.url | relLangURL }}">
|
|
{{ site.Params.hugoblox.header.cta.text }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
|
|
<div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
|
|
|
|
{{/* Show site search? */}}
|
|
{{ $show_search := site.Params.hugoblox.header.search | default false }}
|
|
{{ with $show_search }}
|
|
<button
|
|
aria-label="toggle search"
|
|
class="inline-block px-3 text-xl text-[var(--hb-color-header-fg)] hover:text-primary-500 cursor-pointer"
|
|
data-search-toggle>
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
|
</button>
|
|
{{ end }}
|
|
|
|
{{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
|
|
{{ if $show_mode_toggle }}
|
|
<div class="px-3 text-[var(--hb-color-header-fg)] hover:text-primary-500
|
|
[&.active]:font-bold [&.active]:text-primary-500">
|
|
<button class="theme-toggle mt-1" accesskey="t" title="appearance">
|
|
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="block dark:hidden">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="hidden dark:block">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{/* Theme Picker */}}
|
|
{{ if site.Params.hugoblox.header.theme_picker }}
|
|
<div class="px-3">
|
|
<select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
|
|
<option value="">Theme</option>
|
|
{{ range $name, $data := hugo.Data.themes }}
|
|
<option value="{{ $name }}">{{ $name | humanize }}</option>
|
|
{{ end }}
|
|
</select>
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('hb-theme-pack');
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme-pack', savedTheme);
|
|
// Defer selecting the option until DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const select = document.querySelector('select[onchange*="data-theme-pack"]');
|
|
if (select) select.value = savedTheme;
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
|
|
{{ if .IsTranslated | and $show_translations }}
|
|
<div class="pl-1 mr-5 text-[var(--hb-color-header-fg)] hover:text-primary-500
|
|
[&.active]:font-bold [&.active]:text-primary-500">
|
|
{{- partial "components/language-chooser.html" (dict "page" .) -}}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- CTA button -->
|
|
{{ if site.Params.hugoblox.header.cta.enable }}
|
|
<a
|
|
href="{{ site.Params.hugoblox.header.cta.url | relLangURL }}"
|
|
class="inline-block rounded border px-5 py-2 font-semibold transition
|
|
md:ml-4 px-4 py-1.5 text-sm
|
|
border-black hover:bg-black dark:hover:bg-white dark:hover:text-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white
|
|
hidden lg:inline-block">
|
|
{{ site.Params.hugoblox.header.cta.text }}
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
{{ if $show_search }}
|
|
{{- partial "components/search-modal.html" . -}}
|
|
{{ end }}
|