@sofidevo/astro-dynamic-header 3.1.0 → 4.0.0

package/src/NavMenu.astro

@@ -3,33 +3,13 @@ import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
 import ChevronIcon from "./ChevronIcon.astro";
 
 export interface Props {
-  /**
-   * Header type for styling.
-   * @example "floating"
-   */
   type?: "floating" | "fullscreen";
-  /** Array of menu items to display. */
   menuItems?: MenuItem[];
-  /**
-   * Whether to show the home link in the menu.
-   * @default true
-   */
   showHomeLink?: boolean;
-  /**
-   * Text for the home link.
-   * @default "Home"
-   */
   homeText?: string;
-  /**
-   * The destination URL for the home link.
-   * @default "/"
-   */
   homeUrl?: string;
-  /** Extra CSS class(es) for the `<nav>` element. */
   header__menu__class?: string;
-  /** Extra CSS class(es) for each top-level `<li>` item. */
   header__item__class?: string;
-  /** Extra CSS class(es) for each top-level menu `<a>` link. */
   menu__link__class?: string;
 }
 
@@ -47,105 +27,9 @@ const pagePathname = Astro.url.pathname;
 ---
 
 <script>
-  function adjustSubsubmenuPositionOnResize() {
-    const subsubmenus = document.querySelectorAll(
-      ".subsubmenu",
-    ) as NodeListOf<HTMLElement>;
-
-    subsubmenus.forEach((subsubmenu) => {
-      const rect = subsubmenu.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-
-      if (rect.right > viewportWidth) {
-        subsubmenu.style.right = "100%";
-        subsubmenu.style.left = "0";
-      } else {
-        subsubmenu.style.left = "100%";
-        subsubmenu.style.right = "0";
-      }
-    });
-  }
+  import { initNavMenu } from "./scripts/nav-menu.js";
 
-  function handleSubsubmenuInteraction() {
-    const parentItems = document.querySelectorAll(".submenu__item--secondary");
-
-    parentItems.forEach((parentItem) => {
-      const subsubmenu = parentItem.querySelector(".subsubmenu");
-
-      if (subsubmenu) {
-        const adjustPosition = () => {
-          const viewportWidth = window.innerWidth;
-
-          const originalDisplay = (subsubmenu as HTMLElement).style.display;
-          const originalVisibility = (subsubmenu as HTMLElement).style
-            .visibility;
-
-          (subsubmenu as HTMLElement).style.display = "block";
-          (subsubmenu as HTMLElement).style.visibility = "hidden";
-          (subsubmenu as HTMLElement).style.left = "100%";
-          (subsubmenu as HTMLElement).style.transform = "auto";
-
-          const rect = subsubmenu.getBoundingClientRect();
-
-          if (rect.right > viewportWidth) {
-            (subsubmenu as HTMLElement).style.left = "-100%";
-            (subsubmenu as HTMLElement).style.right = "auto";
-            const leftRect = subsubmenu.getBoundingClientRect();
-
-            if (leftRect.left < 0) {
-              (subsubmenu as HTMLElement).style.left = "100%";
-              const overflow = rect.right - viewportWidth + 30;
-              (subsubmenu as HTMLElement).style.transform =
-                `translateX(-${overflow}px)`;
-            }
-          }
-          (subsubmenu as HTMLElement).style.display = originalDisplay;
-          (subsubmenu as HTMLElement).style.visibility = originalVisibility;
-        };
-
-        const showSubsubmenu = () => {
-          adjustPosition();
-
-          (subsubmenu as HTMLElement).style.opacity = "1";
-          (subsubmenu as HTMLElement).style.pointerEvents = "all";
-
-          const isPositionedLeft =
-            (subsubmenu as HTMLElement).style.left === "-100%";
-          const transformDirection = isPositionedLeft ? "-32px" : "32px";
-
-          const currentTransform = (subsubmenu as HTMLElement).style.transform;
-          if (currentTransform && currentTransform.includes("translateX")) {
-            const existingTranslate = currentTransform.match(
-              /translateX\(([^)]+)\)/,
-            );
-            if (existingTranslate) {
-              const existingValue = existingTranslate[1];
-              (subsubmenu as HTMLElement).style.transform =
-                `translateX(calc(${existingValue} + ${transformDirection}))`;
-            }
-          } else {
-            (subsubmenu as HTMLElement).style.transform =
-              `${currentTransform} translateX(${transformDirection})`.trim();
-          }
-        };
-
-        const hideSubsubmenu = () => {
-          (subsubmenu as HTMLElement).style.opacity = "";
-          (subsubmenu as HTMLElement).style.pointerEvents = "";
-          (subsubmenu as HTMLElement).style.transform = "";
-        };
-
-        parentItem.addEventListener("mouseenter", showSubsubmenu);
-        parentItem.addEventListener("mouseleave", hideSubsubmenu);
-      }
-    });
-  }
-
-  window.addEventListener("resize", adjustSubsubmenuPositionOnResize);
-  document.addEventListener("DOMContentLoaded", () => {
-    adjustSubsubmenuPositionOnResize();
-    handleSubsubmenuInteraction();
-  });
+  initNavMenu();
 </script>
 
 <nav class:list={["header__menu", header__menu__class]} id="header-menu">
@@ -205,187 +89,195 @@ const pagePathname = Astro.url.pathname;
   </ul>
 </nav>
 
-<style is:inline>
-  .header__menu {
-    @media (width < 768px) {
-      display: none;
+<style>
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
+
+  @layer components {
+    .header__menu {
+      @media (width < 768px) {
+        display: none;
+      }
     }
-  }
 
-  .menu {
-    list-style: none;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    .menu {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
-    @media (width < 768px) {
-      flex-direction: column;
+      @media (width < 768px) {
+        flex-direction: column;
+      }
     }
-  }
-
-  .menu__link {
-    text-decoration: none;
-    padding: 0.5em;
-    display: flex;
-    align-items: center;
-    gap: 0.8em;
-    color: color-mix(
-      in srgb,
-      var(--accent-color, #00ffff) 30%,
-      var(--text-color, #ffffff) 70%
-    );
-    position: relative;
-  }
 
-  @media screen and (min-width: 768px) {
-    .menu__link::after {
-      position: absolute;
-      top: 33px;
-      left: 0;
-      content: "";
-      width: 100%;
-      transform: scale(0);
-      transform-origin: 1;
-      height: 2px;
-      transition: transform 0.3s ease;
-      background: var(--accent-color, #00ffff);
+    .menu__link {
+      text-decoration: none;
+      padding: 0.5em;
+      display: flex;
+      align-items: center;
+      gap: 0.8em;
+      color: color-mix(
+        in srgb,
+        var(--accent-color, #00ffff) 30%,
+        var(--text-color, #ffffff) 70%
+      );
+      position: relative;
     }
 
-    .menu__link:hover::after {
-      transform: scale(1);
+    @media screen and (min-width: 768px) {
+      .menu__link::after {
+        position: absolute;
+        top: 33px;
+        left: 0;
+        content: "";
+        width: 100%;
+        transform: scale(0);
+        transform-origin: 1;
+        height: 2px;
+        transition: transform 0.3s ease;
+        background: var(--accent-color, #00ffff);
+      }
+
+      .menu__link:hover::after {
+        transform: scale(1);
+      }
     }
-  }
 
-  .ChevronIcon-arrow {
-    transition: transform 0.3s linear;
-  }
+    .ChevronIcon-arrow {
+      transition: transform 0.3s linear;
+    }
 
-  .menu__link:hover > .ChevronIcon-arrow {
-    transform: rotate(180deg);
-  }
+    .menu__link:hover > .ChevronIcon-arrow {
+      transform: rotate(180deg);
+    }
 
-  .submenu,
-  .subsubmenu {
-    color: var(--text-color, #ffffff);
-    background-color: var(--bg-color-opaque, #171717);
-    border: 0.5px solid
-      color-mix(in srgb, var(--accent-color, #3e1c71) 30%, transparent);
-    position: absolute;
-    flex-direction: column;
-    gap: 0.4em;
-    padding: 1em;
-    border-radius: 10px;
-    transition: transform 0.3s ease-in-out;
-    pointer-events: none;
-    opacity: 0;
-    text-wrap: nowrap;
-  }
+    .submenu,
+    .subsubmenu {
+      color: var(--text-color, #ffffff);
+      background-color: var(--bg-color-opaque, #171717);
+      border: 0.5px solid
+        color-mix(in srgb, var(--accent-color, #3e1c71) 30%, transparent);
+      position: absolute;
+      flex-direction: column;
+      gap: 0.4em;
+      padding: 1em;
+      border-radius: 10px;
+      transition: transform 0.3s ease-in-out;
+      pointer-events: none;
+      opacity: 0;
+      text-wrap: nowrap;
+    }
 
-  .menu__item {
-    padding: 6px;
-    position: relative;
-    list-style: none;
-  }
+    .menu__item {
+      padding: 6px;
+      position: relative;
+      list-style: none;
+    }
 
-  .submenu a,
-  .subsubmenu a {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 64px;
-    border-radius: 6px;
-    color: var(--text-color, #fff);
-  }
+    .submenu a,
+    .subsubmenu a {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 64px;
+      border-radius: 6px;
+      color: var(--text-color, #fff);
+    }
 
-  .submenu__item--secondary,
-  .submenu__item--tertiary {
-    position: relative;
-  }
+    .submenu__item--secondary,
+    .submenu__item--tertiary {
+      position: relative;
+    }
 
-  .submenu__item--secondary a,
-  .submenu__item--tertiary a {
-    padding: 26px;
-  }
+    .submenu__item--secondary a,
+    .submenu__item--tertiary a {
+      padding: 26px;
+    }
 
-  .submenu__item--secondary a:hover,
-  .submenu__item--tertiary a:hover {
-    background: color-mix(
-      in srgb,
-      var(--accent-color, #00ffff) 15%,
-      transparent
-    );
-    color: var(--text-color, white);
-  }
+    .submenu__item--secondary a:hover,
+    .submenu__item--tertiary a:hover {
+      background: color-mix(
+        in srgb,
+        var(--accent-color, #00ffff) 15%,
+        transparent
+      );
+      color: var(--text-color, white);
+    }
 
-  .submenu {
-    padding: 0.9em;
-    right: calc(50% - 80px);
-  }
+    .submenu {
+      padding: 0.9em;
+      right: calc(50% - 80px);
+    }
 
-  .submenu::after {
-    content: "";
-    position: absolute;
-    top: -1.1em;
-    width: 100%;
-    z-index: -3;
-    pointer-events: none;
-    height: 7em;
-    right: 0;
-  }
+    .submenu::after {
+      content: "";
+      position: absolute;
+      top: -1.1em;
+      width: 100%;
+      z-index: -3;
+      pointer-events: none;
+      height: 7em;
+      right: 0;
+    }
 
-  .subsubmenu {
-    top: 0;
-    left: auto;
-    right: auto;
-    min-width: 193px;
-  }
+    .subsubmenu {
+      top: 0;
+      left: auto;
+      right: auto;
+      min-width: 193px;
+    }
 
-  .subsubmenu::before {
-    content: "";
-    position: absolute;
-    top: -4em;
-    z-index: -1;
-    pointer-events: none;
-    height: 10em;
-    width: 20em;
-    height: 14em;
-  }
+    .subsubmenu::before {
+      content: "";
+      position: absolute;
+      top: -4em;
+      z-index: -1;
+      pointer-events: none;
+      height: 10em;
+      width: 20em;
+      height: 14em;
+    }
 
-  .subsubmenu::after {
-    content: "";
-    position: absolute;
-    top: -14px;
-    right: 3em;
-    width: 100%;
-    z-index: -3;
-    height: 21em;
-  }
+    .subsubmenu::after {
+      content: "";
+      position: absolute;
+      top: -14px;
+      right: 3em;
+      width: 100%;
+      z-index: -3;
+      height: 21em;
+    }
 
-  .submenu li {
-    width: 100%;
-  }
+    .submenu li {
+      width: 100%;
+    }
 
-  .menu__item:hover > .submenu {
-    opacity: 1;
-    pointer-events: all;
-    transform: translateY(1.4em);
-  }
+    .menu__item:hover > .submenu {
+      opacity: 1;
+      pointer-events: all;
+      transform: translateY(1.4em);
+    }
 
-  .menu__item:hover > .submenu::after {
-    pointer-events: all;
-  }
+    .menu__item:hover > .submenu::after {
+      pointer-events: all;
+    }
 
-  .submenu li:hover > .subsubmenu {
-    opacity: 1;
-    pointer-events: all;
-  }
+    .submenu li:hover > .subsubmenu {
+      opacity: 1;
+      pointer-events: all;
+    }
 
-  .submenu li:hover > .subsubmenu::before {
-    pointer-events: all;
-  }
+    .submenu li:hover > .subsubmenu::before {
+      pointer-events: all;
+    }
 
-  .submenu li:hover > .subsubmenu::after {
-    pointer-events: all;
+    .submenu li:hover > .subsubmenu::after {
+      pointer-events: all;
+    }
   }
 </style>

package/src/SunIcon.astro

@@ -15,20 +15,28 @@ const content = `<g class="gutruu"><path fill-opacity="0" class="xkoryc"><animat
 />
 
 <style is:inline>
-  .gutruu {
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: var(--svg-stroke-width--2px, 2px);
-  }
-  .xkoryc {
-    fill: currentColor;
-    stroke-dasharray: 34;
-    d: path(
-      "M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z"
-    );
-  }
-  .ft5dvn {
-    fill: none;
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
+
+  @layer components {
+    .gutruu {
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: var(--svg-stroke-width--2px, 2px);
+    }
+    .xkoryc {
+      fill: currentColor;
+      stroke-dasharray: 34;
+      d: path(
+        "M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z"
+      );
+    }
+    .ft5dvn {
+      fill: none;
+    }
   }
 </style>

package/src/index.ts

@@ -129,8 +129,12 @@ export interface DualThemeConfig {
  * Custom CSS class names for high-level layout & appearance customization.
  *
  * These target the structural wrapper elements of the Header. For fine-grained
- * control over individual nav links or the logo internals, use the nested
- * `xxx__class` props inside the `navigation` or `logo` config objects instead.
+ * control over the nav items use the `xxx__class` props inside `navigation`,
+ * and style the logo directly on the markup you pass to the `logo` slot.
+ *
+ * The component styles live in `@layer components`, so any class passed here
+ * (Tailwind utilities included) wins over the built-in styles — no
+ * `!important` and no `twMerge()` required.
  *
  * @example
  * ```astro
@@ -142,10 +146,6 @@ export interface HeaderClassNames {
   container?: string;
   /** Inner `<header>` element — best place for shadows, borders, transitions. */
   header?: string;
-  /** Logo anchor `<a>` — add hover states or focus rings here. */
-  logo?: string;
-  /** Logo text `<span>` — override typography here. */
-  logoText?: string;
   /** Desktop nav wrapper `<div>` — adjust spacing between logo and menu. */
   nav?: string;
   /** Mobile nav panel `<nav>` — add slide-in overrides or z-index tweaks. */

package/src/scripts/hamburger.ts

@@ -0,0 +1,55 @@
+/**
+ * Behaviour for the hamburger button + mobile panel.
+ * Extracted from `Header.astro` so it can be unit tested.
+ */
+
+export class HamburgerController {
+  private readonly hamburgerBtn: HTMLElement | null;
+  private readonly mobileMenu: HTMLElement | null;
+  private readonly links: NodeListOf<HTMLElement>;
+
+  constructor(doc: Document = document) {
+    this.hamburgerBtn = doc.getElementById("hamburger-btn");
+    this.mobileMenu = doc.getElementById("mobile-header-menu");
+    this.links = doc.querySelectorAll(".mobile-menu__link");
+    this.init();
+  }
+
+  private init(): void {
+    if (!this.hamburgerBtn || !this.mobileMenu) return;
+
+    this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
+    this.links.forEach((link) => {
+      link.addEventListener("click", () => this.closeMenu());
+    });
+  }
+
+  closeMenu(): void {
+    this.hamburgerBtn?.classList.remove("is-active");
+    this.mobileMenu?.classList.remove("is-active");
+  }
+
+  toggleMenu(): void {
+    this.hamburgerBtn?.classList.toggle("is-active");
+    this.mobileMenu?.classList.toggle("is-active");
+  }
+}
+
+/**
+ * Wires the hamburger as soon as the DOM is ready (module scripts may run
+ * before or after `DOMContentLoaded`, so both paths are handled).
+ */
+export function initHamburger(doc: Document = document): HamburgerController | null {
+  if (doc.readyState === "loading") {
+    let controller: HamburgerController | null = null;
+    doc.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        controller = new HamburgerController(doc);
+      },
+      { once: true },
+    );
+    return controller;
+  }
+  return new HamburgerController(doc);
+}