This repository has been archived on 2024-07-07. You can view files and clone it, but cannot push or open issues or pull requests.
bird.tacowolf.net/themes/avian/layouts/partials/header.html

127 lines
No EOL
6 KiB
HTML

<header class="mx-auto w-screen max-w-screen-2xl px-6 sm:px-7 xl:px-8 2xl:px-10 py-6">
{{/* CSS functionality for menu toggle */}}
<style type="text/css">
input#nav-toggle:checked~label#show-button {
display: none;
}
input#nav-toggle:checked~label#hide-button {
display: flex;
}
input#nav-toggle:checked~#nav-menu {
display: block;
}
</style>
<nav class="flex items-center justify-between flex-wrap">
<a href="{{ .Site.Home.Permalink }}" class="flex items-center text-slate-800 dark:text-slate-200 font-bold">
{{ .Site.Title }}
</a>
<input id="nav-toggle" type=checkbox class="hidden">
<label id="show-button" for="nav-toggle"
class="flex items-center sm:hidden text-slate-600 dark:text-slate-400 hover:text-sky-500">
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu Open</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" />
</svg>
</label>
<label id="hide-button" for="nav-toggle" class="items-center hidden text-gray-700 hover:text-blue-500">
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu Close</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)" />
</svg>
</label>
<ul id="nav-menu" class="sm:flex w-full sm:w-auto hidden mt-2 sm:mt-0 sm:space-x-2">
<li>
<label class="sr-only">Theme</label>
<button type="button" id="theme-toogle" onclick="changeTheme()"
class="py-1 hover:text-sky-500 dark:hover:text-sky-500">
<svg id="theme-toggle-dark" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15" />
</svg>
<svg id="theme-toggle-light" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16,1C24.279,1 31,7.721 31,16C31,24.279 24.279,31 16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1ZM16,5C9.929,5 5,9.929 5,16C5,22.071 9.929,27 16,27C22.071,27 27,22.071 27,16C27,9.929 22.071,5 16,5Z" />
</svg>
<svg id="theme-toggle-system" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M16,1C24.279,1 31,7.721 31,16C31,24.279 24.279,31 16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1ZM16,5C9.929,5 5,9.929 5,16C5,22.071 9.929,27 16,27C22.071,27 27,22.071 27,16C27,9.929 22.071,5 16,5Z" />
<path d="M16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1L16,31Z" />
</g>
</svg>
</button>
</li>
</ul>
</nav>
<script>
var themeDarkIcon = document.getElementById("theme-toggle-dark");
var themeLightIcon = document.getElementById("theme-toggle-light");
var themeSystemIcon = document.getElementById("theme-toggle-system");
function setThemeVisibility(themeParameter) {
switch (themeParameter) {
case "system":
themeSystemIcon.classList.toggle("hidden");
break;
case "light":
themeLightIcon.classList.toggle("hidden");
break;
case "dark": themeDarkIcon.classList.toggle("hidden");
}
}
function changeTheme() {
if (themeSystemIcon.classList.contains("hidden") == false) {
themeSystemIcon.classList.toggle("hidden");
themeLightIcon.classList.toggle("hidden");
localStorage.setItem("color-theme", "light");
document.documentElement.classList.remove('dark');
} else if (themeLightIcon.classList.contains("hidden") == false) {
themeLightIcon.classList.toggle("hidden");
themeDarkIcon.classList.toggle("hidden");
localStorage.setItem("color-theme", "dark");
document.documentElement.classList.add('dark');
} else if (themeDarkIcon.classList.contains("hidden") == false) {
themeDarkIcon.classList.toggle("hidden");
themeSystemIcon.classList.toggle("hidden");
localStorage.removeItem("color-theme");
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
} else {
/* default fallback to system preference */
themeSystemIcon.classList.remove("hidden");
themeLightIcon.classList.add("hidden");
themeDarkIcon.classList.add("hidden");
localStorage.removeItem("color-theme");
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
}
}
function setupThemeIndicator() {
/* load theme variable from local storage */
if (localStorage.getItem("color-theme") === "dark") {
var themeParameter = "dark";
} else if (localStorage.getItem("color-theme") === "light") {
var themeParameter = "light";
} else {
var themeParameter = "system";
}
setThemeVisibility(themeParameter);
}
window.onload = setupThemeIndicator;
</script>
</header>