@sofidevo/astro-dynamic-header 1.0.25 → 1.0.27

package/README.md

@@ -7,8 +7,7 @@ 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
-- � **Slot Support**: Customizable slots for desktop header and mobile panel content
-- �🚀 **TypeScript Support**: Full type safety and IntelliSense
+- 🚀 **TypeScript Support**: Full type safety and IntelliSense
 - 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior
 - ⚡ **Astro Optimized**: Built specifically for Astro framework
 
@@ -133,131 +132,6 @@ 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
@@ -272,6 +146,27 @@ The `slot-desktop` is visible on both desktop and mobile by default. If you want
 - 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
 
@@ -347,43 +242,9 @@ If you encounter import errors, try these solutions:
 
 Visit our demo website to see the component in action with interactive examples and complete documentation.
 
-## 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
+## Contributing
 
-### Test Technologies
-- **Vitest**: Fast testing framework
-- **jsdom**: DOM simulation for component testing
-- **TypeScript**: Type-safe test writing
+Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## License
 

package/package.json

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

package/src/Header.astro

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

package/src/MobileNav.astro

@@ -110,7 +110,6 @@ const pagePathname = Astro.url.pathname;
       ))
     }
   </ol>
-  <slot name="slot-panel" />
 </nav>
 
 <style>
@@ -123,7 +122,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 = "-210%";
+            (subsubmenu as HTMLElement).style.left = "-200%";
             (subsubmenu as HTMLElement).style.right = "auto";
             const leftRect = subsubmenu.getBoundingClientRect();
 
@@ -190,6 +190,7 @@ const pagePathname = Astro.url.pathname;
   }
 
   .menu {
+    padding: 1rem;
     list-style: none;
     display: flex;
     align-items: center;
@@ -202,7 +203,7 @@ const pagePathname = Astro.url.pathname;
 
   .menu__link {
     text-decoration: none;
-    padding: 0.5rem ;
+    padding: 0.5rem 1rem;
     display: flex;
     align-items: center;
     gap: 0.8rem;
@@ -213,7 +214,7 @@ const pagePathname = Astro.url.pathname;
   @media screen and (min-width: 768px) {
     .menu__link::after {
       position: absolute;
-      top: 33px;
+      top: 25px;
       left: 0;
       content: "";
       width: 100%;
@@ -264,7 +265,7 @@ const pagePathname = Astro.url.pathname;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: 1rem;
+    height: 4rem;
     border-radius: 0.4rem;
     color: #fff;
     color: var(--color-tertiary, #fff);
@@ -277,7 +278,7 @@ const pagePathname = Astro.url.pathname;
 
   .submenu__item--secondary a,
   .submenu__item--tertiary a {
-    padding: 1rem;
+    padding: 2rem;
   }
 
   .submenu__item--secondary a:hover,
@@ -287,7 +288,7 @@ const pagePathname = Astro.url.pathname;
   }
 
   .submenu {
-    padding: .5rem;
+    padding: 1rem;
     right: -23px;
   }