Header.astro

---
import { getSite } from "../utils/consts";
import HeaderLink from "./HeaderLink.astro";

const site = await getSite();
import SearchModal from "./SearchModal.astro";
import ThemeToggle from "./ThemeToggle.astro";
import { Icon } from "astro-icon/components";
const subpath = import.meta.env.BASE_URL;
---

<header class="fixed w-full z-30 flex items-center ">
  <div
    class="content-shell w-full h-full"
  >
    <div
      class="grid h-full grid-cols-[1fr_auto] grid-rows-[auto_auto] items-center md:grid-cols-[auto_1fr_auto] md:grid-rows-1"
    >
      <div class="flex flex-col [html[data-nav='open']_&]:items-center">
        <h1
          class="text-base font-semibold uppercase m-0 [html[data-nav='open']_&]:text-center"
        >
          <a href={subpath} aria-label={site.title}>
            <Icon
              name="tabler:rocket"
              size="2em"
              class="inline-block mr-3 align-middle"
              aria-hidden="true"
            />
            <span class="hidden md:inline">{site.title}</span>
          </a>
        </h1>
      </div>
      <nav
        class="hidden md:flex items-center gap-2 md:gap-3 overflow-x-auto overflow-y-visible pt-1 pb-0.5 text-[0.72rem] tracking-[0.24em] uppercase text-muted [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [--tw-pan-y:none] [&::-webkit-scrollbar]:hidden col-span-2 md:col-auto md:justify-self-center [html[data-nav='open']_&]:flex [html[data-nav='open']_&]:flex-col [html[data-nav='open']_&]:items-start [html[data-nav='open']_&]:gap-2 [html[data-nav='open']_&]:py-4 [html[data-nav='open']_&]:w-full [html[data-nav='open']_&]:col-span-2 [html[data-nav='open']_&]:justify-self-stretch"
      >
        <HeaderLink href="/blog">Blog</HeaderLink>
        <HeaderLink href="/team">Team</HeaderLink>
        <HeaderLink href="/about">About</HeaderLink>
        <HeaderLink href="/projects">Projects</HeaderLink>
      </nav>
      <div class="flex items-center gap-2 md:gap-3 shrink-0 justify-end">
        <button
          class="header-button md:hidden"
          type="button"
          id="nav-toggle"
          aria-label="Toggle navigation"
          aria-pressed="false"
        >
          <span
            class="inline-flex [html[data-nav='open']_&]:hidden"
            aria-hidden="true"
          >
            <Icon name="tabler:menu-2" size={18} stroke-width={1.6} />
          </span>
          <span
            class="hidden [html[data-nav='open']_&]:inline-flex"
            aria-hidden="true"
          >
            <Icon name="tabler:x" size={18} stroke-width={1.6} />
          </span>
          <span class="sr-only">Toggle navigation</span>
        </button>
        <SearchModal />
        <a
          class="header-button"
          href="https://github.com/roicort/launchpad"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Visit the GitHub repository"
        >
          <Icon name="tabler:brand-github" size={18} stroke-width={1.6} />
        </a>
        <button
          class="header-button"
          type="button"
          id="debug-toggle"
          aria-label="Toggle debug borders"
          aria-pressed="false"
        >
          <Icon name="tabler:bug" size={18} stroke-width={1.6} />
        </button>
        <ThemeToggle />
      </div>
    </div>
  </div>
</header>

<script is:inline>
  const DEBUG_KEY = "debug-borders";

  const applyDebug = (state) => {
    const isOn = state === "on";
    document.documentElement.dataset.debug = isOn ? "on" : "off";
    const button = document.getElementById("debug-toggle");
    if (button) button.setAttribute("aria-pressed", isOn ? "true" : "false");
  };

  const applyNav = (state) => {
    const isOpen = state === "open";
    document.documentElement.dataset.nav = isOpen ? "open" : "closed";
    const button = document.getElementById("nav-toggle");
    if (button) button.setAttribute("aria-pressed", isOpen ? "true" : "false");
  };

  const getPreferredDebug = () => {
    const stored = localStorage.getItem(DEBUG_KEY);
    if (stored === "on" || stored === "off") return stored;
    return "off";
  };

  const toggleDebug = () => {
    const current =
      document.documentElement.dataset.debug === "on" ? "on" : "off";
    const next = current === "on" ? "off" : "on";
    localStorage.setItem(DEBUG_KEY, next);
    applyDebug(next);
  };

  const toggleNav = () => {
    const current =
      document.documentElement.dataset.nav === "open" ? "open" : "closed";
    const next = current === "open" ? "closed" : "open";
    applyNav(next);
  };

  applyDebug(getPreferredDebug());
  applyNav("closed");

  const debugButton = document.getElementById("debug-toggle");
  if (debugButton) {
    debugButton.addEventListener("click", toggleDebug);
  }

  const navButton = document.getElementById("nav-toggle");
  if (navButton) {
    navButton.addEventListener("click", toggleNav);
  }

  const navElement = document.querySelector("nav");
  const navLinks = document.querySelectorAll("nav a");
  navLinks.forEach((link) => {
    link.addEventListener("click", () => applyNav("closed"));
  });

  document.addEventListener("click", (event) => {
    if (document.documentElement.dataset.nav !== "open") return;
    const target = event.target;
    if (!(target instanceof Element)) return;
    const clickedToggle = navButton && navButton.contains(target);
    const clickedNav = navElement && navElement.contains(target);
    if (!clickedToggle && !clickedNav) {
      applyNav("closed");
    }
  });
</script>

<style>

  @reference "tailwindcss";

  header {
		min-height: calc(var(--grid-cell) * 1);
		background: color-mix(in oklab, var(--color-surface) 80%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
  }

  /* Make header taller on small screens (2 grid cells) */
  @media (max-width: 720px) {
	  header {
		min-height: calc(var(--grid-cell) * 4);
	  }

	  /* Ensure vertical padding on the content shell when mobile nav is open */
	  html[data-nav='open'] .content-shell {
		padding-top: 1rem;
		padding-bottom: 1rem;
	  }
  }

  /* header-button styles moved to `src/styles/global.css` so they apply across components */
</style>