59 lines
2.9 KiB
HTML
59 lines
2.9 KiB
HTML
<nav class="navbar" aria-label="Main navigation">
|
|
<div class="navbar__inner">
|
|
|
|
<a href="/" class="navbar__logo" aria-label="{{ .Site.Title }} home">
|
|
<img class="spud" src="/favicon.svg" alt="" aria-hidden="true" width="24" height="24">
|
|
<span>thepotato.tech</span>
|
|
<span class="shrug" aria-hidden="true">¯\_(ツ)_/¯</span>
|
|
</a>
|
|
|
|
<button class="navbar__hamburger" aria-label="Toggle navigation" aria-expanded="false" id="nav-hamburger">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
|
|
<line x1="2" y1="5" x2="18" y2="5"/><line x1="2" y1="10" x2="18" y2="10"/><line x1="2" y1="15" x2="18" y2="15"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<ul class="navbar__links" id="nav-links" role="list">
|
|
{{- $cur := . }}
|
|
{{- range .Site.Menus.main }}
|
|
<li><a href="{{ .URL }}"{{ if $cur.IsMenuCurrent "main" . }} aria-current="page"{{ end }}>{{ .Name }}</a></li>
|
|
{{- end }}
|
|
<li>
|
|
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
|
|
<svg class="icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
<svg class="icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
<span class="sr-only">Toggle theme</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
(function(){
|
|
var btn = document.getElementById('theme-toggle');
|
|
if (btn) btn.addEventListener('click', function(){
|
|
var root = document.documentElement;
|
|
var cur = root.getAttribute('data-theme');
|
|
if (!cur) cur = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
var next = cur === 'dark' ? 'light' : 'dark';
|
|
root.setAttribute('data-theme', next);
|
|
localStorage.setItem('potato-theme', next);
|
|
});
|
|
var burger = document.getElementById('nav-hamburger');
|
|
var links = document.getElementById('nav-links');
|
|
if (burger && links) burger.addEventListener('click', function(){
|
|
var open = links.classList.toggle('is-open');
|
|
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
});
|
|
})();
|
|
</script>
|