@sofidevo/astro-dynamic-header 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",

package/src/Header.astro

@@ -39,37 +39,6 @@ const {
 } = Astro.props;
 ---
 
-<script>
-  class HamburgerController {
-    private hamburgerBtn: HTMLElement | null;
-    private mobileMenu: HTMLElement | null;
-
-    constructor() {
-      this.hamburgerBtn = document.getElementById("hamburger-btn");
-      this.mobileMenu = document.getElementById("mobile-header-menu");
-      this.init();
-    }
-
-    private init(): void {
-      if (this.hamburgerBtn && this.mobileMenu) {
-        this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
-      }
-    }
-
-    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}>

package/src/hamburger.ts

@@ -1,19 +1,5 @@
 const d = document;
 
-
-/**
- * Adds a global click event listener to handle hamburger menu button and menu link interactions.
- *
- * When the hamburger button or any of its child elements are clicked, toggles the "is-active" class
- * on both the hamburger button and the associated panel. When a menu link is clicked, removes the
- * "is-active" class from both the hamburger button and the panel.
- *
- * @param hamburgerBtn - A CSS selector string for the hamburger button element.
- * @param panel - A CSS selector string for the panel element to show/hide.
- * @param menuLink - A CSS selector string for the menu link elements that close the menu when clicked.
- */
-
-
 export function HamburgerButton(hamburgerBtn: string, panel: string, menuLink: string): void {
   d.addEventListener("click", (e: Event) => {
     const target = e.target as Element;
@@ -32,80 +18,6 @@ export function HamburgerButton(hamburgerBtn: string, panel: string, menuLink: s
   });
 }
 
-// Class-based approach for the default implementation
-export class HamburgerButtonController {
-  private hamburgerBtn: HTMLElement | null;
-  private mobileMenu: HTMLElement | null;
-
-  constructor() {
-    this.hamburgerBtn = document.getElementById("hamburger-btn");
-    this.mobileMenu = document.getElementById("mobile-header-menu");
-    this.init();
-  }
-
-  private init(): void {
-    if (this.hamburgerBtn && this.mobileMenu) {
-      this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
-      // Add event listener for closing menu when clicking on menu links
-      this.addMenuLinkListeners();
-    }
-  }
-
-  private addMenuLinkListeners(): void {
-    // Listen for clicks on the document to handle menu link clicks
-    document.addEventListener("click", (e: Event) => {
-      const target = e.target as Element;
-
-      // Check if the clicked element is within the mobile menu
-      const mobileMenu = document.getElementById("mobile-header-menu");
-      if (!mobileMenu || !mobileMenu.contains(target)) {
-        return;
-      }
-
-      // Check if the clicked element is a menu link (including all mobile menu variants)
-      const isMenuLink = target?.matches?.(".mobile-menu__link") ||
-                        target?.matches?.(".menu__link.mobile-menu__link") ||
-                        target?.closest?.(".mobile-menu__link") ||
-                        target?.closest?.(".menu__link.mobile-menu__link");
-
-      if (isMenuLink) {
-        // Only close if it's an actual link with a valid href (not a summary/dropdown toggle)
-        const closestLink = target.closest("a");
-        if (closestLink && closestLink.href &&
-            closestLink.href !== "#" &&
-            !closestLink.href.endsWith("#")) {
-          this.closeMenu();
-        }
-      }
-    });
-  }
-
-  private toggleMenu(): void {
-    if (this.hamburgerBtn && this.mobileMenu) {
-      this.hamburgerBtn.classList.toggle("is-active");
-      this.mobileMenu.classList.toggle("is-active");
-    }
-  }
-
-  public openMenu(): void {
-    if (this.hamburgerBtn && this.mobileMenu) {
-      this.hamburgerBtn.classList.add("is-active");
-      this.mobileMenu.classList.add("is-active");
-    }
-  }
-
-  public closeMenu(): void {
-    if (this.hamburgerBtn && this.mobileMenu) {
-      this.hamburgerBtn.classList.remove("is-active");
-      this.mobileMenu.classList.remove("is-active");
-    }
-  }
-}
-
-// Auto-initialize when DOM is ready (using only the class-based approach)
-if (typeof document !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
-    // Initialize only the class-based controller to avoid conflicts
-    new HamburgerButtonController();
-  });
-}
+d.addEventListener("DOMContentLoaded", () => {
+  HamburgerButton(".hamburger", ".mobile-header__menu", ".mobile-menu__link, .menu__link.mobile-menu__link");
+});

package/src/index.ts

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