@stnd/layout 0.2.0 → 0.5.1

package/Header.astro

@@ -0,0 +1,542 @@
+---
+/**
+ * @component Header
+ * @description Minimalist responsive header — brand on the left, nav menu on
+ * the right, hamburger on mobile (below 768px). Fixed to the viewport top;
+ * hides on scroll-down and reappears on scroll-up when `startHidden` is set.
+ * Reads nav defaults from `virtual:stnd/config`. Slots: `brand` (replaces the
+ * default brand link), `actions` (page-level buttons — Share/Edit/etc. —
+ * rendered before the burger, visible regardless of `menu`/`hideMenu`),
+ * `right` (extra content after the nav menu), and two viewport-fixed slots
+ * rendered as siblings of the header itself — `bottom-left` / `bottom-right`.
+ *
+ * @example astro
+ * <Header />
+ * <Header brand="@stnd" items={[{ title: "Docs", url: "/docs" }]} />
+ */
+import config from "virtual:stnd/config";
+
+interface Props {
+  /** Brand text shown in the default `brand` slot. Defaults to the site config's own title, then "Home". */
+  brand?: string;
+  /** Link target for the default brand. Default: "https://standard.garden/" */
+  brandHref?: string;
+  /** Nav items — defaults to `config.nav.header` (or `config.nav` if it's an array). */
+  items?: Array<{ title: string; url: string; external?: boolean }>;
+  /** When false, the burger button and nav menu are not rendered. Default: true */
+  menu?: boolean;
+  /** When true, the header starts hidden and only appears on scroll-up. Default: false */
+  startHidden?: boolean;
+  class?: string;
+}
+
+const defaultNav =
+  config.nav?.header ?? (Array.isArray(config.nav) ? config.nav : []);
+
+const {
+  brand = config.title || "Home",
+  brandHref = "https://standard.garden/",
+  items = defaultNav,
+  menu: menuEnabled = true,
+  startHidden = false,
+  class: className,
+} = Astro.props;
+
+const currentUrl = Astro.url?.pathname || "https://standard.garden/";
+
+function normalizePath(p = "") {
+  if (!p) return "/";
+  const s = String(p).replace(/\/+$/, "");
+  return s === "" ? "/" : s;
+}
+
+function isActive(itemUrl: string) {
+  const a = normalizePath(itemUrl);
+  const b = normalizePath(currentUrl);
+  return a === "/" ? b === "/" : b.startsWith(a);
+}
+
+const safeItems = Array.isArray(items) ? items : [];
+const siteUrl = Astro.site ? Astro.site.toString() : "";
+
+const renderedItems = safeItems.map((item) => {
+  const href = item.url || "#";
+  const active = isActive(href);
+  const isAbsolute = /^https?:\/\//i.test(href);
+  const external =
+    item.external || (isAbsolute && !href.startsWith(normalizePath(siteUrl)));
+  const rel = external ? "noopener noreferrer" : undefined;
+  const target = external ? "_blank" : undefined;
+
+  return {
+    href,
+    active,
+    rel,
+    target,
+    title: item.title || "Untitled",
+  };
+});
+---
+
+<header
+  class:list={[
+    "stnd-header no-rhythm mt-0 no-decoration",
+    { "is-at-top": !startHidden, "is-hidden": startHidden },
+    className,
+  ]}
+  data-stnd-header
+  data-start-hidden={startHidden ? "" : undefined}
+>
+  <nav>
+    <slot name="brand">
+      <a href={brandHref} class="stnd-header-brand">{brand}</a>
+    </slot>
+    <div class="flex items-center gap-half">
+      <slot name="actions" />
+      {
+        menuEnabled && (
+          <button
+            class="stnd-header-burger"
+            style="box-shadow:none;"
+            aria-label="Menu"
+            aria-expanded="false"
+            data-stnd-burger
+          >
+            <span />
+            <span />
+            <span />
+          </button>
+        )
+      }
+
+      {
+        menuEnabled && renderedItems.length > 0 && (
+          <>
+            <ul
+              class="stnd-header-menu-desktop no-rhythm"
+              data-stnd-menu-desktop
+            >
+              {renderedItems.map(({ href, active, target, rel, title }) => (
+                <li>
+                  <a
+                    href={href}
+                    class:list={[{ "is-active": active }]}
+                    aria-current={active ? "page" : undefined}
+                    target={target}
+                    rel={rel}
+                  >
+                    {title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <ul class="stnd-header-menu-mobile no-rhythm" data-stnd-menu-mobile>
+              {renderedItems.map(({ href, active, target, rel, title }) => (
+                <li>
+                  <a
+                    href={href}
+                    class:list={[{ "is-active": active }]}
+                    aria-current={active ? "page" : undefined}
+                    target={target}
+                    rel={rel}
+                  >
+                    {title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </>
+        )
+      }
+
+      <slot name="right" />
+    </div>
+  </nav>
+</header>
+
+<div class="stnd-slot-bl" data-stnd-bl>
+  <slot name="bottom-left" />
+</div>
+<div class="stnd-slot-br" data-stnd-br>
+  <slot name="bottom-right" />
+</div>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const header = document.querySelector("[data-stnd-header]") as HTMLElement;
+    const burger = document.querySelector(
+      "[data-stnd-burger]",
+    ) as HTMLButtonElement;
+    const mobileMenu = document.querySelector(
+      "[data-stnd-menu-mobile]",
+    ) as HTMLElement;
+    if (!header) return;
+
+    // ── Burger toggle ──
+    function toggle() {
+      const isOpen = header.classList.toggle("is-open");
+      burger?.classList.toggle("is-active", isOpen);
+      burger?.setAttribute("aria-expanded", String(isOpen));
+      document.body.classList.toggle("no-scroll", isOpen);
+    }
+
+    function close() {
+      header.classList.remove("is-open");
+      burger?.classList.remove("is-active");
+      burger?.setAttribute("aria-expanded", "false");
+      document.body.classList.remove("no-scroll");
+    }
+
+    burger?.addEventListener("click", toggle);
+
+    // Close menu when a link is clicked (mobile)
+    mobileMenu
+      ?.querySelectorAll("a")
+      .forEach((a) => a.addEventListener("click", close));
+
+    // Close menu when clicking backdrop (the ul itself)
+    mobileMenu?.addEventListener("click", (e) => {
+      if (e.target === mobileMenu) {
+        close();
+      }
+    });
+
+    // Close menu on resize if switching to desktop
+    function onResize() {
+      if (window.innerWidth > 600 && header.classList.contains("is-open")) {
+        close();
+      }
+    }
+    window.addEventListener("resize", onResize);
+
+    // ── Scroll behavior ──
+    const isStartHidden = header.hasAttribute("data-start-hidden");
+    let hasScrolled = false;
+    let lastY = window.scrollY;
+    let ticking = false;
+
+    function onScroll() {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        const y = window.scrollY;
+
+        // Track first scroll for startHidden mode
+        if (!hasScrolled && y > 0) hasScrolled = true;
+
+        // At top — transparent (only if we've scrolled at least once, or not startHidden)
+        if (y < 10 && (hasScrolled || !isStartHidden)) {
+          header.classList.add("is-at-top");
+          header.classList.remove("is-hidden", "is-scrolled");
+        } else {
+          header.classList.remove("is-at-top");
+
+          // Scrolling down past 100px — hide
+          if (y > lastY && y > 100) {
+            header.classList.add("is-hidden");
+            header.classList.remove("is-scrolled");
+          }
+          // Scrolling up — show with backdrop
+          else if (y < lastY && (hasScrolled || !isStartHidden)) {
+            const deltaUp = lastY - y;
+            if (deltaUp > 40) {
+              header.classList.remove("is-hidden");
+              header.classList.add("is-scrolled");
+            }
+          }
+        }
+
+        lastY = y <= 0 ? 0 : y;
+        ticking = false;
+      });
+    }
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    // Initial check (skip if startHidden — it already has is-hidden)
+    if (!isStartHidden && window.scrollY > 10) {
+      header.classList.remove("is-at-top");
+      header.classList.add("is-scrolled");
+    }
+
+    // ── Auto-hide after scroll inactivity ──
+    // The header is revealed by scroll only (see onScroll). Mouse movement must
+    // NOT pop it out — moving the cursor used to clear `is-hidden`, which made the
+    // header slide out on every twitch. We tie the idle-hide to scroll activity
+    // and leave the header alone while it's at the top of the page.
+    let hideTimeout: number | undefined;
+
+    function resetHideTimeout() {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+      hideTimeout = window.setTimeout(() => {
+        if (!header.classList.contains("is-at-top")) {
+          header.classList.add("is-hidden");
+        }
+      }, 5000); // 5 seconds
+    }
+
+    // Reset the idle-hide timer on scroll only (never on mousemove).
+    window.addEventListener("scroll", resetHideTimeout, { passive: true });
+
+    // ── Cleanup for View Transitions ──
+    document.addEventListener(
+      "astro:before-swap",
+      () => {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("scroll", resetHideTimeout);
+        close();
+      },
+      { once: true },
+    );
+  });
+</script>
+
+<style>
+  :global(body.no-scroll) {
+    overflow: hidden;
+  }
+
+  /* ── Header shell ── */
+
+  .stnd-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 300;
+    min-height: 0;
+    padding-inline: var(--gap-body);
+    padding-block: var(--space-d2);
+    background: var(--color-glass);
+    backdrop-filter: var(--filter-glass);
+    border-bottom: var(--border);
+    transition:
+      transform var(--transition-slow),
+      background var(--transition-slow),
+      backdrop-filter var(--transition-slow),
+      border-bottom var(--transition-slow),
+      box-shadow var(--transition-slow),
+      min-height var(--transition-slow),
+      padding var(--transition);
+    pointer-events: none;
+    font-family: var(--font-interface);
+  }
+
+  .stnd-header.is-at-top {
+    background: none;
+    backdrop-filter: none;
+    border-bottom-color: transparent;
+    box-shadow: none;
+    padding-block-start: var(--gap-body);
+  }
+
+  .stnd-header.is-scrolled {
+    box-shadow: var(--shadow);
+    padding-block: var(--space);
+  }
+
+  .stnd-header.is-hidden {
+    transform: translateY(-100%);
+  }
+
+  /* Mobile menu open (handled by mobile menu background now) */
+
+  /* ── Nav layout ── */
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: var(--body-max-width, 100%);
+    margin-inline: auto;
+    pointer-events: auto;
+  }
+
+  /* ── Brand ── */
+  .stnd-header-brand {
+    font-size: var(--size-base);
+    font-weight: var(--font-header-weight);
+    text-decoration: none;
+    color: var(--color-foreground);
+    z-index: 10;
+  }
+
+  /* ── Menu (desktop) ── */
+  .stnd-header-menu-desktop {
+    display: flex;
+    gap: var(--space-half);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 0;
+    transition: none;
+  }
+
+  .stnd-header-menu-desktop li::before {
+    display: none;
+  }
+
+  .stnd-header-menu-desktop a {
+    font-size: var(--size-sm);
+    text-decoration: none;
+    color: var(--color-muted);
+  }
+  .stnd-header-menu-desktop a:hover {
+    color: var(--color-accent);
+  }
+  .stnd-header-menu-desktop a.is-active {
+    color: var(--color-foreground);
+  }
+
+  .stnd-header-menu-mobile {
+    display: none;
+  }
+
+  /* ── Burger (hidden on desktop) ── */
+  .stnd-header-burger {
+    display: none;
+    position: relative;
+    z-index: 10;
+    width: var(--space-half);
+    height: var(--space-half);
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .stnd-header-burger span {
+    position: absolute;
+    display: block;
+    right: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-foreground);
+    transition: all 0.3s ease;
+  }
+  .stnd-header-burger span:nth-child(1) {
+    top: 0rem;
+    width: 100%;
+  }
+  .stnd-header-burger span:nth-child(2) {
+    top: 0.3rem;
+    width: 100%;
+  }
+  .stnd-header-burger span:nth-child(3) {
+    top: 0.6rem;
+    width: 100%;
+  }
+
+  /* Burger → X animation */
+  .stnd-header-burger.is-active span:nth-child(1) {
+    top: 0.3rem;
+    rotate: 135deg;
+  }
+  .stnd-header-burger.is-active span:nth-child(2) {
+    opacity: 0;
+  }
+  .stnd-header-burger.is-active span:nth-child(3) {
+    top: 0.3rem;
+    rotate: -135deg;
+  }
+
+  /* ── Mobile ── */
+  @media screen and (max-width: 768px) {
+    .stnd-header-burger {
+      display: block;
+    }
+
+    .stnd-header-menu-desktop {
+      display: none;
+    }
+
+    .stnd-header-menu-mobile {
+      position: fixed;
+      display: flex;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 100dvh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-3);
+      opacity: 0;
+      pointer-events: none;
+      transition: all var(--transition-slow);
+      z-index: 5;
+      will-change: opacity;
+      background: var(--color-glass);
+      backdrop-filter: var(--filter-glass);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .stnd-header-menu-mobile li::before {
+      display: none;
+    }
+
+    .stnd-header.is-open .stnd-header-menu-mobile {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .stnd-header-menu-mobile a {
+      font-size: var(--size-2xl);
+      font-weight: var(--font-header-weight);
+      color: var(--color-foreground);
+      text-decoration: none;
+    }
+    .stnd-header-menu-mobile a:hover {
+      color: var(--color-accent);
+    }
+    .stnd-header-menu-mobile a.is-active {
+      color: var(--color-foreground);
+    }
+  }
+
+  /* ── Bottom Slots ── */
+  .stnd-slot-bl,
+  .stnd-slot-br {
+    position: fixed;
+    z-index: 290;
+    bottom: var(--gap-body);
+
+    transition:
+      transform var(--duration-slow) var(--ease-stnd),
+      opacity var(--duration-slow) var(--ease-stnd);
+    /* Default state: Visible */
+    transform: translateY(0);
+    opacity: 1;
+    will-change: transform, opacity;
+  }
+
+  .stnd-slot-bl {
+    left: var(--gap-body);
+  }
+
+  .stnd-slot-br {
+    right: var(--gap-body);
+  }
+
+  :global(:is(.stnd-slot-bl, .stnd-slot-bl) a) {
+    color: inherit;
+  }
+  :global(:is(.stnd-slot-bl, .stnd-slot-bl) strong) {
+    color: inherit;
+  }
+  :global(:is(.stnd-slot-bl, .stnd-slot-bl) em) {
+    color: inherit;
+  }
+
+  /* Hidden state controlled by Header sibling */
+  .stnd-header.is-hidden ~ .stnd-slot-bl,
+  .stnd-header.is-hidden ~ .stnd-slot-br {
+    transform: translateY(var(--space));
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>