hugo-theme-zzo/layouts/partials/navbar/site-nav.html

89 lines
2.9 KiB
HTML

<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar__brand">
{{ if $.Param "logo" | default true }}
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="navbar__logo-link">
<img src="{{ "/logo.png" | relURL }}" alt="Home" class="navbar__logo">
</a>
{{ end }}
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="navbar__title-link">
<h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
</a>
</div>
{{ partial "navbar/select-theme-mobile" . }}
{{ partial "navbar/site-search-mobile" . }}
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar__menu">
{{ partial "navbar/select-theme" . }}
{{ range .Site.Menus.main -}}
{{ if .HasChildren }}
<div class="navbar__dropdown navbar__slide-down">
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item">
{{ safeHTML .Name }}
<span class="navbar__menu-icon">
{{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
</span>
</a>
<div class="navbar__dropdown--content">
{{ range .Children }}
<a href="{{ .URL | relLangURL }}" class="navbar__dropdown--item">{{ safeHTML .Name }}</a>
{{ end }}
</div>
</div>
{{ else }}
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down">{{ safeHTML .Name }}</a>
{{ end }}
{{ end }}
</div>
</nav>
<script>
// theme change
var localTheme = localStorage.getItem('theme');
if (localTheme) {
$('.select-theme__item').each(function() {
$(this).removeClass('is-active');
});
$(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
}
$('.select-theme__item').click(function (e) {
var selectedThemeVariant = $(e.target).text().trim();
localStorage.setItem('theme', selectedThemeVariant);
if ($(this).attr('class').trim() === selectedThemeVariant) {
return null;
}
$('#root').removeAttr('class').addClass(`theme__${selectedThemeVariant}`);
var nodes = $('.select-theme').children('.dropdown-item');
nodes.each(function () {
if ($(this).text().trim() === selectedThemeVariant) {
if (!$(this).hasClass('is-active')) {
$(this).addClass('is-active');
}
} else {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
}
}
});
if (window.mermaid) {
if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
mermaid.initialize({ theme: 'dark' });
location.reload();
} else {
mermaid.initialize({ theme: 'default' });
location.reload();
}
}
});
</script>