@sofidevo/astro-dynamic-header 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -61,6 +61,5 @@
     "url": "https://github.com/SofiDevO/astro-dynamic-header/issues"
   },
   "homepage": "https://github.com/SofiDevO/astro-dynamic-header#readme",
-
   "demo": "https://base-astro-psi.vercel.app/fullscreen-demo"
 }

package/src/Header.astro

@@ -39,14 +39,60 @@ const {
 } = Astro.props;
 ---
 
+<script>
+  class HamburgerController {
+    private hamburgerBtn: HTMLElement | null;
+    private mobileMenu: HTMLElement | null;
+    private links: NodeListOf<HTMLElement>;
+
+    constructor() {
+      this.hamburgerBtn = document.getElementById("hamburger-btn");
+      this.mobileMenu = document.getElementById("mobile-header-menu");
+      this.links = document.querySelectorAll(".mobile-menu__link");
+      this.init();
+    }
+
+    private init(): void {
+      if (this.hamburgerBtn && this.mobileMenu) {
+        this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
+        this.links.forEach(link => {
+          link.addEventListener("click", () => this.closeMenu());
+        });
+      }
+    }
+
+    private closeMenu(): void {
+      if (this.hamburgerBtn && this.mobileMenu) {
+        this.hamburgerBtn.classList.remove("is-active");
+        this.mobileMenu.classList.remove("is-active");
+      }
+    }
+
+    private toggleMenu(): void {
+      if (this.hamburgerBtn && this.mobileMenu) {
+        this.hamburgerBtn.classList.toggle("is-active");
+        this.mobileMenu.classList.toggle("is-active");
+      }
+    }
+  }
+
+  // Auto-initialize when DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    new HamburgerController();
+  });
+</script>
+
 <div class={`header__container header__container--${headerType}`} style={`z-index: ${zIndex};`}>
   <header class={`header header--${headerType}`} style={`background-color: ${backgroundColor}; backdrop-filter: ${backdropBlur}; -webkit-backdrop-filter: ${backdropBlur};`}>
     <a href={homeUrl}>
       <img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
     </a>
     <NavMenu menuItems={menuItems} />
+    <slot/>
     <HamburgerButton />
+
     <MobileNav menuItems={menuItems}  type={headerType} />
+
   </header>
 </div>
 

package/src/NavMenu.astro

@@ -86,7 +86,7 @@ const pagePathname = Astro.url.pathname;
 
           const isPositionedLeft =
             (subsubmenu as HTMLElement).style.left === "-100%";
-          const transformDirection = isPositionedLeft ? "-2rem" : "2.2rem";
+          const transformDirection = isPositionedLeft ? "-2rem" : "2rem";
 
           const currentTransform = (subsubmenu as HTMLElement).style.transform;
           if (currentTransform && currentTransform.includes("translateX")) {

package/src/index.ts

@@ -1,5 +1,4 @@
-// TypeScript utilities
-export { HamburgerButton } from './hamburger.ts';
+
 
 // Types
 export interface MenuItemType {

package/src/hamburger.ts

@@ -1,23 +0,0 @@
-const d = document;
-
-export function HamburgerButton(hamburgerBtn: string, panel: string, menuLink: string): void {
-  d.addEventListener("click", (e: Event) => {
-    const target = e.target as Element;
-
-    if (
-      target?.matches?.(hamburgerBtn) ||
-      target?.matches?.(`${hamburgerBtn} *`)
-    ) {
-      d.querySelector(hamburgerBtn)?.classList.toggle("is-active");
-      d.querySelector(panel)?.classList.toggle("is-active");
-    }
-    if (target?.matches?.(menuLink)) {
-      d.querySelector(hamburgerBtn)?.classList.remove("is-active");
-      d.querySelector(panel)?.classList.remove("is-active");
-    }
-  });
-}
-
-d.addEventListener("DOMContentLoaded", () => {
-  HamburgerButton(".hamburger", ".mobile-header__menu", ".mobile-menu__link, .menu__link.mobile-menu__link");
-});