@sofidevo/astro-dynamic-header 1.0.28 → 1.0.29

package/README.md

@@ -7,7 +7,8 @@ A dynamic, responsive header component for Astro projects that can switch betwee
 - 🎨 **Dynamic Styles**: Switch between floating and fullscreen header layouts
 - 📱 **Fully Responsive**: Mobile-first design with hamburger menu
 - 🎯 **Multi-level Dropdowns**: Support for nested navigation menus
-- 🚀 **TypeScript Support**: Full type safety and IntelliSense
+- � **Slot Support**: Customizable slots for desktop header and mobile panel content
+- �🚀 **TypeScript Support**: Full type safety and IntelliSense
 - 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior
 - ⚡ **Astro Optimized**: Built specifically for Astro framework
 
@@ -132,6 +133,131 @@ interface MenuItemType {
 }
 ```
 
+## Slots Support
+
+The Header component provides two customizable slots that allow you to add additional content:
+
+### Available Slots
+
+| Slot Name | Location | Visibility | Description |
+|-----------|----------|------------|-------------|
+| `slot-desktop` | Header (desktop & mobile) | Always visible | Add content to the main header area |
+| `slot-panel` | Mobile navigation panel | Mobile only | Add content to the mobile menu panel |
+
+### Slot Examples
+
+#### Using Individual Slots
+
+```astro
+---
+import Header from '@sofidevo/astro-dynamic-header/Header';
+
+const menuItems = [
+  { link: '/about', text: 'About' },
+  { link: '/contact', text: 'Contact' },
+];
+---
+
+<!-- Adding content only to desktop header -->
+<Header
+  headerType="floating"
+  logoSrc="/logo.png"
+  menuItems={menuItems}
+>
+  <button slot="slot-desktop" class="cta-button">Get Started</button>
+</Header>
+
+<!-- Adding content only to mobile panel -->
+<Header
+  headerType="fullscreen"
+  logoSrc="/logo.png"
+  menuItems={menuItems}
+>
+  <div slot="slot-panel" class="mobile-footer">
+    <p>© 2024 My Company</p>
+    <div class="social-links">
+      <a href="/twitter">Twitter</a>
+      <a href="/linkedin">LinkedIn</a>
+    </div>
+  </div>
+</Header>
+```
+
+#### Using Both Slots Together
+
+```astro
+---
+import Header from '@sofidevo/astro-dynamic-header/Header';
+
+const menuItems = [
+  { link: '/about', text: 'About' },
+  { link: '/services', text: 'Services' },
+  { link: '/contact', text: 'Contact' },
+];
+---
+
+<Header
+  headerType="fullscreen"
+  logoSrc="/logo.png"
+  logoAlt="My Company"
+  logoWidth="150px"
+  homeUrl="/"
+  menuItems={menuItems}
+  backgroundColor="#000000dd"
+  backdropBlur="blur(15px)"
+  zIndex={100}
+>
+  <!-- Content for desktop header -->
+  <button slot="slot-desktop" class="cta-button">
+    Sign Up
+  </button>
+
+  <!-- Content for mobile panel -->
+  <div slot="slot-panel" class="mobile-extras">
+    <button class="mobile-cta">Download App</button>
+    <div class="mobile-contact">
+      <p>Call us: +1 (555) 123-4567</p>
+      <p>Email: info@company.com</p>
+    </div>
+  </div>
+</Header>
+```
+
+#### Responsive Slot Behavior
+
+The `slot-desktop` is visible on both desktop and mobile by default. If you want to hide it on mobile, use CSS:
+
+```css
+/* Hide desktop slot on mobile devices */
+@media (width < 768px) {
+  .cta-button {
+    display: none;
+  }
+}
+
+/* Or create responsive variants */
+.desktop-only {
+  display: block;
+}
+
+@media (width < 768px) {
+  .desktop-only {
+    display: none;
+  }
+}
+```
+
+```astro
+<Header menuItems={menuItems}>
+  <button slot="slot-desktop" class="cta-button desktop-only">
+    Desktop CTA
+  </button>
+  <div slot="slot-panel">
+    <button class="mobile-cta">Mobile CTA</button>
+  </div>
+</Header>
+```
+
 ## Header Types
 
 ### Floating Header
@@ -146,27 +272,6 @@ interface MenuItemType {
 - Edge-to-edge design
 - Ideal for traditional website layouts
 
-## Individual Components
-
-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';
----
-
-<NavMenu menuItems={menuItems} showHomeLink={true} homeText="Home" />
-<MobileNav menuItems={menuItems} accentColor="#00ffff" />
-<HamburgerButton color="#ffffff" />
-```
 
 ## Styling and Customization
 
@@ -242,9 +347,43 @@ If you encounter import errors, try these solutions:
 
 Visit our demo website to see the component in action with interactive examples and complete documentation.
 
-## Contributing
+## Testing
+
+This project includes a comprehensive test suite with 34 tests covering all critical functionality.
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage report
+npm run test:coverage
+```
+
+### Test Coverage
+
+The test suite covers:
+
+#### Component Logic Tests
+- **Header Component** (4 tests): Hamburger controller functionality, menu toggle behavior
+- **HamburgerButton Component** (10 tests): Button states, responsive behavior, accessibility
+- **MobileNav Component** (7 tests): Dropdown structure, nested submenus, conditional rendering
+- **NavMenu Component** (6 tests): Dynamic positioning, submenu interactions, viewport adjustments
+
+#### Integration Tests (7 tests)
+- Component interaction flows
+- Responsive behavior between mobile/desktop
+- Keyboard navigation and accessibility
+- Menu state management during navigation
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+### Test Technologies
+- **Vitest**: Fast testing framework
+- **jsdom**: DOM simulation for component testing
+- **TypeScript**: Type-safe test writing
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -27,7 +27,10 @@
     "build": "astro build",
     "dev": "astro dev",
     "check": "astro check",
-    "check:watch": "astro check --watch"
+    "check:watch": "astro check --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "keywords": [
     "astro",
@@ -50,8 +53,12 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.0",
+    "@types/jsdom": "^21.1.7",
+    "@vitest/coverage-v8": "^3.2.4",
     "astro": "^5.12.8",
-    "typescript": "^5.0.0"
+    "jsdom": "^26.1.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
   },
   "repository": {
     "type": "git",
@@ -60,6 +67,5 @@
   "bugs": {
     "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"
+  "homepage": "https://base-astro-psi.vercel.app/fullscreen-demo"
 }

package/src/Header.astro

@@ -88,10 +88,11 @@ const {
       <img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
     </a>
     <NavMenu menuItems={menuItems} />
-    <slot/>
+    <slot name="slot-desktop" />
     <HamburgerButton />
-
-    <MobileNav menuItems={menuItems}  type={headerType} />
+    <MobileNav menuItems={menuItems}  type={headerType}>
+      <slot name="slot-panel" slot="slot-panel" />
+    </MobileNav>
 
   </header>
 </div>
@@ -114,7 +115,7 @@ const {
 
   /* Floating header container styles */
   .header__container--floating {
-    padding: 16px;
+    padding: 1rem;
   }
 
   /* Fullscreen header container styles */

package/src/MobileNav.astro

@@ -50,7 +50,7 @@ const pagePathname = Astro.url.pathname;
       )
     }
     {
-      menuItems.map((item) => (
+      menuItems?.map((item: any) => (
         <li>
           {item.submenu ? (
             <details class="mobile-details">
@@ -65,7 +65,7 @@ const pagePathname = Astro.url.pathname;
                 />
               </summary>
               <ol class="mobile-submenu">
-                {item.submenu.map((sub) => (
+                {item?.submenu?.map((sub:any) => (
                   <li>
                     {sub.submenu && sub.submenu.length > 0 ? (
                       <details class="mobile-details">
@@ -80,7 +80,7 @@ const pagePathname = Astro.url.pathname;
                           />
                         </summary>
                         <ol class="mobile-subsubmenu">
-                          {sub.submenu.map((subsub) => (
+                          {sub.submenu.map((subsub:any) => (
                             <li class="mobile-submenu__item secondary">
                               <a
                                 class="menu__link mobile-menu__link"
@@ -110,6 +110,7 @@ const pagePathname = Astro.url.pathname;
       ))
     }
   </ol>
+  <slot name="slot-panel" />
 </nav>
 
 <style>
@@ -122,7 +123,7 @@ const pagePathname = Astro.url.pathname;
       width: 104vw;
       height: 100dvh;
       position: fixed;
-      top: -16px;
+      /* top: -16px; */
       left: 0;
       background: #151515;
       z-index: 20;

package/src/NavMenu.astro

@@ -63,7 +63,7 @@ const pagePathname = Astro.url.pathname;
           const rect = subsubmenu.getBoundingClientRect();
 
           if (rect.right > viewportWidth) {
-            (subsubmenu as HTMLElement).style.left = "-200%";
+            (subsubmenu as HTMLElement).style.left = "-210%";
             (subsubmenu as HTMLElement).style.right = "auto";
             const leftRect = subsubmenu.getBoundingClientRect();
 
@@ -190,7 +190,6 @@ const pagePathname = Astro.url.pathname;
   }
 
   .menu {
-    padding: 1rem;
     list-style: none;
     display: flex;
     align-items: center;
@@ -203,7 +202,7 @@ const pagePathname = Astro.url.pathname;
 
   .menu__link {
     text-decoration: none;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem ;
     display: flex;
     align-items: center;
     gap: 0.8rem;
@@ -214,7 +213,7 @@ const pagePathname = Astro.url.pathname;
   @media screen and (min-width: 768px) {
     .menu__link::after {
       position: absolute;
-      top: 25px;
+      top: 33px;
       left: 0;
       content: "";
       width: 100%;
@@ -288,7 +287,7 @@ const pagePathname = Astro.url.pathname;
   }
 
   .submenu {
-    padding: 1rem;
+    padding: 0.9rem;
     right: -23px;
   }
 
@@ -337,7 +336,7 @@ const pagePathname = Astro.url.pathname;
   .menu__item:hover > .submenu {
     opacity: 1;
     pointer-events: all;
-    transform: translateY(2.5rem);
+    transform: translateY(1.4rem);
   }
 
   .menu__item:hover > .submenu::after {