---

import { SITE_TITLE } from "@/consts";

import HeaderLink from "./HeaderLink.astro";

---

<script is:inline>

const getThemePreference = () => {

if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {

return localStorage.getItem('theme');

}

return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

};

const isDark = getThemePreference() === 'dark';

document.documentElement.classList[isDark ? 'add' : 'remove']('dark');

if (typeof localStorage !== 'undefined') {

const observer = new MutationObserver(() => {

const isDark = document.documentElement.classList.contains('dark');

localStorage.setItem('theme', isDark ? 'dark' : 'light');

});

observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

}

document.addEventListener('astro:after-swap', () => {

const theme = localStorage.getItem('theme');

if (theme === 'dark') {

document.documentElement.classList.add('dark');

} else if (theme === 'light') {

document.documentElement.classList.remove('dark');

}

});

</script>

<header class="sticky top-0 gap-4 px-4 py-2 bg-transparent backdrop-blur-sm">

<nav class="flex items-center justify-between gap-4">

<h2 id="logo" class="text-xl"><a href="/">{SITE_TITLE}</a></h2>

<div class="flex gap-4">

<HeaderLink href="/projects">Projects</HeaderLink>

<HeaderLink href="/blog">Blog</HeaderLink>

</div>

</nav>

</header>