121 lines
4.7 KiB
HTML
Executable file
121 lines
4.7 KiB
HTML
Executable file
{{- /* theme-toggle is enabled */}}
|
|
{{- if (not site.Params.disableThemeToggle) }}
|
|
{{- /* theme is light */}}
|
|
{{- if (eq site.Params.defaultTheme "light") }}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "dark") {
|
|
document.body.classList.add('dark');
|
|
}
|
|
|
|
</script>
|
|
{{- /* theme is dark */}}
|
|
{{- else if (eq site.Params.defaultTheme "dark") }}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "light") {
|
|
document.body.classList.remove('dark')
|
|
}
|
|
|
|
</script>
|
|
{{- else }}
|
|
{{- /* theme is auto */}}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "dark") {
|
|
document.body.classList.add('dark');
|
|
} else if (localStorage.getItem("pref-theme") === "light") {
|
|
document.body.classList.remove('dark')
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.body.classList.add('dark');
|
|
}
|
|
|
|
</script>
|
|
{{- end }}
|
|
{{- /* theme-toggle is disabled and theme is auto */}}
|
|
{{- else if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark"))}}
|
|
<script>
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.body.classList.add('dark');
|
|
}
|
|
|
|
</script>
|
|
{{- end }}
|
|
|
|
{{- if (not site.Params.disableThemeToggle) }}
|
|
<script>
|
|
// Initialize all theme toggle buttons when the DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggles = document.querySelectorAll('.theme-toggle-button');
|
|
|
|
themeToggles.forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
if (document.body.classList.contains('dark')) {
|
|
document.body.classList.remove('dark');
|
|
localStorage.setItem("pref-theme", "light");
|
|
} else {
|
|
document.body.classList.add('dark');
|
|
localStorage.setItem("pref-theme", "dark");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{- end }}
|
|
|
|
<header class="header">
|
|
<nav class="nav">
|
|
<div class="logo">
|
|
{{- $label_text := (site.Params.label.text | default site.Title) }}
|
|
{{- if site.Title }}
|
|
<a href="{{ "" | absLangURL }}" accesskey="h" title="{{ $label_text }} (Alt + H)">
|
|
{{- if site.Params.label.icon }}
|
|
{{- $img := resources.Get site.Params.label.icon }}
|
|
{{- if $img }}
|
|
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
|
|
{{- if hugo.IsExtended -}}
|
|
{{- $processableFormats = $processableFormats | append "webp" -}}
|
|
{{- end -}}
|
|
{{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
|
|
{{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
|
|
{{- if site.Params.label.iconHeight }}
|
|
{{- $img = $img.Resize (printf "x%d" site.Params.label.iconHeight) }}
|
|
{{ else }}
|
|
{{- $img = $img.Resize "x30" }}
|
|
{{- end }}
|
|
{{- end }}
|
|
<img src="{{ $img.Permalink }}" alt="" aria-label="logo"
|
|
height="{{- site.Params.label.iconHeight | default "30" -}}">
|
|
{{- else }}
|
|
<img src="{{- site.Params.label.icon | absURL -}}" alt="" aria-label="logo"
|
|
height="{{- site.Params.label.iconHeight | default "30" -}}">
|
|
{{- end -}}
|
|
{{- else if hasPrefix site.Params.label.iconSVG "<svg" }}
|
|
{{ site.Params.label.iconSVG | safeHTML }}
|
|
{{- end -}}
|
|
{{- $label_text -}}
|
|
<img src="/favicon.svg" alt="favicon" class="site-logo">
|
|
</a>
|
|
{{- end }}
|
|
</div>
|
|
{{- $currentPage := . }}
|
|
<!-- Desktop menu -->
|
|
<div class="menu-wrapper">
|
|
{{ partial "menu.html" }}
|
|
</div>
|
|
|
|
<!-- Hamburger Menu -->
|
|
<!-- Icon -->
|
|
<label for="menu-toggle" class="hamburger-menu" aria-label="Toggle menu">
|
|
<img src="/icons/hamburger-menu.svg" alt="Menu" width="24" height="24">
|
|
</label>
|
|
<!-- Hidden checkbox for toggling menu -->
|
|
<input type="checkbox" id="menu-toggle">
|
|
<!-- Menu overlay -->
|
|
<div class="menu-overlay">
|
|
<div class="mobile-menu">
|
|
<label for="menu-toggle" class="mobile-menu-close" aria-label="Close menu">
|
|
<img src="/icons/close-menu.svg" alt="Close Menu" width="24" height="24">
|
|
</label>
|
|
{{ partial "menu.html" }}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|