@sofidevo/astro-dynamic-header 1.0.2 → 1.0.5

package/README.md

@@ -27,7 +27,11 @@ A dynamic, responsive header component for Astro projects that can switch betwee
 
 ```astro
 ---
-import Header from '@sofidevo/astro-dynamic-header/Header.astro';
+// Option 1: Import from direct subpath (recommended)
+import Header from '@sofidevo/astro-dynamic-header/Header';
+
+// Option 2: Import from main entry point with types
+import { HeaderProps, type MenuItemType } from '@sofidevo/astro-dynamic-header';
 
 const menuItems = [
   { link: '/about', text: 'About' },
@@ -42,11 +46,29 @@ const menuItems = [
 />
 ```
 
+### TypeScript Configuration
+
+To ensure imports work correctly in your Astro project, make sure your `tsconfig.json` has the appropriate configuration:
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "extends": "astro/tsconfigs/strict"
+}
+```
+
 ### Advanced Usage
 
 ```astro
 ---
-import Header from '@sofidevo/astro-dynamic-header/Header.astro';
+import Header from '@sofidevo/astro-dynamic-header/Header';
+import type { MenuItemType } from '@sofidevo/astro-dynamic-header';
 
 const menuItems = [
   {
@@ -130,6 +152,12 @@ You can also import and use components individually:
 
 ```astro
 ---
+// Import individual components
+import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu';
+import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav';
+import HamburgerButton from '@sofidevo/astro-dynamic-header/HamburgerButton';
+
+// Or use the .astro extension explicitly
 import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu.astro';
 import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav.astro';
 import HamburgerButton from '@sofidevo/astro-dynamic-header/HamburgerButton.astro';
@@ -173,6 +201,43 @@ import type {
 - Supports CSS `backdrop-filter`
 - Graceful degradation for older browsers
 
+## Troubleshooting
+
+### Import Issues
+
+If you encounter import errors, try these solutions:
+
+1. **Use direct subpath import:**
+   ```astro
+   import Header from '@sofidevo/astro-dynamic-header/Header';
+   ```
+
+2. **Verify TypeScript configuration:**
+   ```json
+   // tsconfig.json
+   {
+     "compilerOptions": {
+       "moduleResolution": "bundler", // or "nodenext"
+       "allowImportingTsExtensions": true
+     }
+   }
+   ```
+
+3. **Import types separately:**
+   ```astro
+   ---
+   import Header from '@sofidevo/astro-dynamic-header/Header';
+   import type { MenuItemType } from '@sofidevo/astro-dynamic-header';
+   ---
+   ```
+
+### Compatibility
+
+- ✅ Astro 4.x and 5.x
+- ✅ SSG Projects (Static Site Generation)
+- ✅ SSR Projects (Server-Side Rendering)
+- ✅ Hybrid Projects (output: 'hybrid')
+
 ## Live Examples
 
 Visit our demo website to see the component in action with interactive examples and complete documentation.

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
     },
     "./Header": "./src/Header.astro",
     "./NavMenu": "./src/NavMenu.astro",
@@ -20,13 +20,12 @@
     "./HamburgerButton.astro": "./src/HamburgerButton.astro"
   },
   "files": [
-    "dist",
     "src",
     "README.md"
   ],
   "scripts": {
-    "build": "astro-package build",
-    "dev": "astro-package dev",
+    "build": "astro build",
+    "dev": "astro dev",
     "check": "astro check",
     "check:watch": "astro check --watch"
   },

package/src/Header.astro

@@ -77,7 +77,7 @@ const {
     </a>
     <NavMenu menuItems={menuItems} />
     <HamburgerButton />
-    <MobileNav menuItems={menuItems} />
+    <MobileNav menuItems={menuItems}  type={headerType} />
   </header>
 </div>
 
@@ -147,4 +147,9 @@ const {
     margin-right: 1rem;
     object-fit: contain;
   }
+
+  /* Adjust transform for fullscreen header */
+  .header--fullscreen .mobile-header__menu.is-active {
+    transform: translate(0%);
+  }
 </style>

package/src/MobileNav.astro

@@ -1,5 +1,6 @@
 ---
 export interface Props {
+  type?: "floating" | "fullscreen";
   menuItems?: Array<{
     link: string;
     text: string;
@@ -9,6 +10,7 @@ export interface Props {
       submenu?: Array<{
         link: string;
         text: string;
+
       }>;
     }>;
   }>;
@@ -17,6 +19,8 @@ export interface Props {
   accentColor?: string;
 }
 
+const  {type} = Astro.props;
+
 const {
   menuItems = [],
   showHomeLink = true,
@@ -27,7 +31,7 @@ const {
 const pagePathname = Astro.url.pathname;
 ---
 
-<nav class="mobile-header__menu" id="mobile-header-menu" style={`--mobile-accent-color: ${accentColor};`}>
+<nav class={`mobile-header__menu mobile-header__menu--${type}`} id="mobile-header-menu" style={`--mobile-accent-color: ${accentColor};`}>
   <ol class="mobile-menu">
     {showHomeLink && pagePathname !== "/" && (
       <li class="header__item mobile-header__item">
@@ -190,6 +194,11 @@ const pagePathname = Astro.url.pathname;
     transform: translateX(-7%);
   }
 
+  /* Adjust transform for fullscreen header */
+  .mobile-header__menu--fullscreen.is-active {
+    transform: translate(0%);
+  }
+
   .menu__summary {
     width: 100%;
     font-size: 1.7rem;

package/src/NavMenu.astro

@@ -43,8 +43,81 @@ const pagePathname = Astro.url.pathname;
     });
   }
 
+  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 = "";
+
+          const rect = subsubmenu.getBoundingClientRect();
+
+          if (rect.right > viewportWidth) {
+            (subsubmenu as HTMLElement).style.left = "-220%";
+            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 ? "-1rem" : "2.5rem";
+
+          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);
+  document.addEventListener('DOMContentLoaded', () => {
+    adjustSubsubmenuPositionOnResize();
+    handleSubsubmenuInteraction();
+  });
 </script>
 
 <nav class="header__menu" id="header-menu">

package/src/hamburger.ts

@@ -1,4 +1,39 @@
-export class HamburgerButton {
+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;
+
+    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");
+    }
+  });
+}
+
+// Class-based approach for the default implementation
+export class HamburgerButtonController {
   private hamburgerBtn: HTMLElement | null;
   private mobileMenu: HTMLElement | null;
 
@@ -11,9 +46,26 @@ export class HamburgerButton {
   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 a menu link (following original logic pattern)
+      if (target?.matches?.(".mobile-menu__link") ||
+          target?.matches?.(".menu__link.mobile-menu__link") ||
+          target?.matches?.(".mobile-menu__link *") ||
+          target?.matches?.(".menu__link.mobile-menu__link *")) {
+        this.closeMenu();
+      }
+    });
+  }
+
   private toggleMenu(): void {
     if (this.hamburgerBtn && this.mobileMenu) {
       this.hamburgerBtn.classList.toggle("is-active");
@@ -36,9 +88,10 @@ export class HamburgerButton {
   }
 }
 
-// Auto-initialize when DOM is ready
+// Auto-initialize when DOM is ready (using only the class-based approach)
 if (typeof document !== 'undefined') {
   document.addEventListener('DOMContentLoaded', () => {
-    new HamburgerButton();
+    // Initialize only the class-based controller to avoid conflicts
+    new HamburgerButtonController();
   });
 }

package/src/index.ts

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