131 lines
6.6 KiB
HTML
131 lines
6.6 KiB
HTML
<script>
|
|
let storageColorScheme = localStorage.getItem("lightDarkMode")
|
|
{{- if eq .Site.Params.colorScheme "light" }}
|
|
if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
|
|
document.getElementsByTagName('html')[0].classList.add('dark')
|
|
}
|
|
{{- else if eq .Site.Params.colorScheme "dark" }}
|
|
if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) || storageColorScheme == "Light") {
|
|
document.getElementsByTagName('html')[0].classList.remove('dark')
|
|
}
|
|
{{- else }}
|
|
if (((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
|
|
document.getElementsByTagName('html')[0].classList.add('dark')
|
|
}
|
|
{{- end }}
|
|
</script>
|
|
<nav class="flex items-center justify-between flex-wrap px-4 py-4 md:py-0">
|
|
<a href="{{ "/" | relLangURL }}" class="me-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a>
|
|
<button id="navbar-btn" class="md:hidden flex items-center px-3 py-2" aria-label="Open Navbar">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<div id="target"
|
|
class="hidden block md:flex md:grow md:justify-between md:items-center w-full md:w-auto text-primary-text z-20">
|
|
<div class="md:flex md:h-16 text-sm md:grow pb-4 md:pb-0 border-b md:border-b-0">
|
|
{{- $relPermalink := .RelPermalink }}
|
|
{{- range .Site.Menus.main }}
|
|
{{- $url := .URL | relLangURL }}
|
|
<a href="{{ $url }}" class="block mt-4 md:inline-block md:mt-0 md:h-(16-4px) md:leading-(16-4px) box-border md:border-t-2 md:border-b-2 {{ if hasPrefix $relPermalink $url }} selected-menu-item {{ else }} border-transparent {{ end }} me-4">{{ .Name }}</a>
|
|
{{- end }}
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="relative pt-4 md:pt-0">
|
|
<div class="cursor-pointer hover:text-eureka" id="lightDarkMode">
|
|
{{- if eq .Site.Params.colorScheme "dark" }}
|
|
<i class="fas fa-moon"></i>
|
|
{{- else if eq .Site.Params.colorScheme "light" }}
|
|
<i class="fas fa-sun"></i>
|
|
{{- else }}
|
|
<i class="fas fa-adjust"></i>
|
|
{{- end }}
|
|
</div>
|
|
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open">
|
|
</div>
|
|
<div class="absolute flex flex-col start-0 md:start-auto end-auto md:end-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
|
|
id='lightDarkOptions'>
|
|
<span class="px-4 py-1 hover:text-eureka" name="Light">{{i18n "light"}}</span>
|
|
<span class="px-4 py-1 hover:text-eureka" name="Dark">{{i18n "dark"}}</span>
|
|
<span class="px-4 py-1 hover:text-eureka" name="Auto">{{i18n "auto"}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{- if .IsTranslated }}
|
|
<div class="relative pt-4 ps-4 md:pt-0">
|
|
<div class="cursor-pointer hover:text-eureka" id="languageMode">
|
|
<i class="fas fa-globe"></i>
|
|
<span class="ps-1">{{ .Language.LanguageName }}</span>
|
|
</div>
|
|
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open-lang">
|
|
</div>
|
|
<div class="absolute flex flex-col start-0 md:start-auto end-auto md:end-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
|
|
id='languageOptions'>
|
|
<a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
|
{{- range .Translations }}
|
|
<a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-0" id="is-open-mobile">
|
|
</div>
|
|
|
|
</nav>
|
|
<script>
|
|
// change icon and add listener if auto
|
|
let element = document.getElementById('lightDarkMode')
|
|
{{- if eq .Site.Params.colorScheme "light" }}
|
|
if (storageColorScheme == 'Auto') {
|
|
element.firstElementChild.classList.remove('fa-sun')
|
|
element.firstElementChild.setAttribute("data-icon", 'adjust')
|
|
element.firstElementChild.classList.add('fa-adjust')
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
|
|
})
|
|
} else if (storageColorScheme == "Dark") {
|
|
element.firstElementChild.classList.remove('fa-sun')
|
|
element.firstElementChild.setAttribute("data-icon", 'moon')
|
|
element.firstElementChild.classList.add('fa-moon')
|
|
}
|
|
{{- else if eq .Site.Params.colorScheme "dark" }}
|
|
if (storageColorScheme == 'Auto') {
|
|
element.firstElementChild.classList.remove('fa-moon')
|
|
element.firstElementChild.setAttribute("data-icon", 'adjust')
|
|
element.firstElementChild.classList.add('fa-adjust')
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
|
|
})
|
|
} else if (storageColorScheme == "Light") {
|
|
element.firstElementChild.classList.remove('fa-moon')
|
|
element.firstElementChild.setAttribute("data-icon", 'sun')
|
|
element.firstElementChild.classList.add('fa-sun')
|
|
}
|
|
{{- else }}
|
|
if (storageColorScheme == null || storageColorScheme == 'Auto') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
|
|
})
|
|
} else if (storageColorScheme == "Light") {
|
|
element.firstElementChild.classList.remove('fa-adjust')
|
|
element.firstElementChild.setAttribute("data-icon", 'sun')
|
|
element.firstElementChild.classList.add('fa-sun')
|
|
} else if (storageColorScheme == "Dark") {
|
|
element.firstElementChild.classList.remove('fa-adjust')
|
|
element.firstElementChild.setAttribute("data-icon", 'moon')
|
|
element.firstElementChild.classList.add('fa-moon')
|
|
}
|
|
{{- end }}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
getcolorscheme();
|
|
switchBurger();
|
|
{{- if .IsTranslated }}
|
|
switchLanguage()
|
|
{{- end }}
|
|
});
|
|
</script>
|