<nav class="mx-2 sm:mx-4">
  <div class="relative flex h-16 items-center justify-between">
    <div>
      <a href="/">
        <span class="hidden sm:inline">Kompact.io</span>
        <span class="inline sm:hidden">K.io</span>
      </a>
    </div>
    <div>
      <ul class="flex flex-row gap-4 md:gap-8">
        <li>
          <button onClick="
          (() => {
            if (!('theme' in localStorage)) {
              localStorage.theme = 'light'
            }
            console.log('*', localStorage.theme)
              if (localStorage.theme === 'light') {
                localStorage.theme = 'dark' 
              } else {
                localStorage.theme = 'light'
              }
            updateTheme()  
            })()
          ">◧</button>
        </li>
        <li>
          <a href="/index.html#contact">
            contact
          </a>
        </li>
        <li>
          <a href="/blog.html">
            blog
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>