mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 22:15:11 +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.
148 lines
6.5 KiB
HTML
148 lines
6.5 KiB
HTML
<!-- Main navigation container -->
|
|
|
|
{{/* Show site search? */}}
|
|
{{ $show_search := site.Params.hugoblox.header.search | default false }}
|
|
|
|
<nav
|
|
class="relative flex w-full flex-nowrap items-center justify-between bg-white py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-slate-900 lg:flex-wrap lg:justify-start lg:py-4"
|
|
data-te-navbar-ref>
|
|
<div class="flex w-full flex-wrap items-center justify-between px-3">
|
|
<!-- Hamburger button for mobile view -->
|
|
<button
|
|
class="block border-0 bg-transparent px-2 text-[var(--hb-color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
|
|
type="button"
|
|
data-te-collapse-init
|
|
data-te-target="#collapse-main-navbar"
|
|
aria-controls="collapse-main-navbar"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation" onclick="toggleNavbar('collapse-main-navbar')">
|
|
<!-- Hamburger icon -->
|
|
<span class="[&>svg]:w-7">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="h-7 w-7">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Collapsible navbar container -->
|
|
<div
|
|
class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto"
|
|
id="collapse-main-navbar"
|
|
data-te-collapse-item>
|
|
<!-- Main links -->
|
|
{{- $currentPage := . }}
|
|
<ul
|
|
class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row items-center"
|
|
data-te-navbar-nav-ref>
|
|
{{- range site.Menus.main }}
|
|
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
|
|
{{- $page_url:= $currentPage.Permalink | absLangURL }}
|
|
{{- $active := eq $menu_item_url $page_url -}}
|
|
{{- $activeClass := cond $active "active" "" -}}
|
|
<!-- Home link [&.active]:text-bold [&.active]:text-black/90 dark:[&.active]:text-neutral-300-->
|
|
<li
|
|
class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
|
|
data-te-nav-item-ref>
|
|
<a
|
|
class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
|
|
[&.active]:font-bold [&.active]:text-primary-500 {{ $activeClass }}"
|
|
aria-current="page"
|
|
href="{{ .URL | relLangURL }}"
|
|
data-te-nav-link-ref
|
|
>{{- .Name -}}</a
|
|
>
|
|
</li>
|
|
{{ end }}
|
|
{{ if $show_search }}
|
|
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
|
|
<a
|
|
class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
|
|
[&.active]:font-bold [&.active]:text-primary-500"
|
|
aria-current="page"
|
|
href="#"
|
|
id="search-toggle"
|
|
>{{- i18n "search" -}}</a
|
|
>
|
|
</li>
|
|
{{ end }}
|
|
{{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
|
|
{{ if $show_mode_toggle }}
|
|
<li class="lg:px-2 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="">
|
|
<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>
|
|
</li>
|
|
{{ end }}
|
|
|
|
{{/* Theme Picker */}}
|
|
{{ if site.Params.hugoblox.header.theme_picker }}
|
|
<li class="lg:px-2">
|
|
<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);
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const select = document.querySelector('select[onchange*="data-theme-pack"]');
|
|
if (select) select.value = savedTheme;
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</li>
|
|
{{ end }}
|
|
|
|
{{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
|
|
{{ if .IsTranslated | and $show_translations }}
|
|
<li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
|
|
[&.active]:font-bold [&.active]:text-primary-500">
|
|
{{- partial "components/language-chooser.html" (dict "page" .) -}}
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{{ if $show_search }}
|
|
{{- partial "components/search-modal.html" . -}}
|
|
{{ end }}
|
|
|
|
<script>
|
|
function toggleNavbar(collapseID){
|
|
document.getElementById(collapseID).classList.toggle("hidden");
|
|
document.getElementById(collapseID).classList.toggle("flex");
|
|
}
|
|
</script>
|