kita/templates/partials/header.html

<header
  class="{% if config.extra.style.header_blur %}blur-header{% else %}header{% endif %} fixed top-0 z-40 mx-auto min-h-[3.5rem] w-full"
>
  <div class="mx-auto w-full max-w-4xl p-3 lg:flex lg:justify-between">
    <div class="flex justify-between">
      <div class="flex items-center">
        <a class="text-2xl font-semibold" href="{{ get_url(path=``) }}">{{ config.title }}</a>
        <div
          class="btn-dark ml-4 h-6 w-6 shrink-0 cursor-pointer text-[0px] [background:url(./icons/theme.svg)_left_center/cover_no-repeat] dark:[background-position:right] dark:invert"
          role="button"
          aria-label="Dark"
        ></div>
      </div>
      {% if config.extra.menu %}
      <div
        class="btn-menu relative z-50 flex h-8 w-8 shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
        role="button"
        aria-label="Menu"
      ></div>
      {% endif %}
    </div>
    <script>
      // base
      const htmlClass = document.documentElement.classList;
      setTimeout(() => {
        htmlClass.remove("not-ready");
      }, 10);

      // mobile menu
      const btnMenu = document.querySelector(".btn-menu");
      btnMenu?.addEventListener("click", () => {
        htmlClass.toggle("open");
      });

      // dark theme
      const setDark = (isDark) => {
        if (isDark) {
          document.body.dispatchEvent(new CustomEvent("set-theme", { detail: "dark" }));
          htmlClass.add("dark");
        } else {
          document.body.dispatchEvent(new CustomEvent("set-theme", { detail: "light" }));
          htmlClass.remove("dark");
        }
        localStorage.setItem("dark", isDark);
      };

      // init
      const darkScheme = window.matchMedia("(prefers-color-scheme: dark)");
      if (htmlClass.contains("dark")) {
        setDark(true);
      } else {
        const darkVal = localStorage.getItem("dark");
        setDark(darkVal ? darkVal === "true" : darkScheme.matches);
      }

      // listen system
      darkScheme.addEventListener("change", (event) => {
        setDark(event.matches);
      });

      // manual switch
      const btnDark = document.querySelector(".btn-dark");
      btnDark.addEventListener("click", () => {
        setDark(localStorage.getItem("dark") !== "true");
      });
    </script>
    {% if config.extra.menu %}
    <nav class="flex w-full items-center lg:w-auto">
      <ul
        class="nav-wrapper flex w-full flex-col py-2 lg:w-auto lg:flex-row lg:self-center lg:py-0"
      >
        {% for menu in config.extra.menu %}
        <li>
          <a
            class="primary-link block py-2 text-center text-lg font-medium lg:px-3 lg:py-0"
            href="{{ menu.url | replace(from=`$BASE_URL`, to=config.base_url) | safe }}"
            >{{ menu.name }}</a
          >
        </li>
        {% endfor %}
      </ul>
      <!-- Header Nav inject -->
      {% include "injects/header_nav.html" ignore missing %}
    </nav>
    {% endif %}
  </div>
</header>