@sofidevo/astro-dynamic-header 1.0.30 → 1.0.32

package/README.md

@@ -4,13 +4,13 @@ A dynamic, responsive header component for Astro projects that can switch betwee
 
 ## Features
 
-- 🎨 **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
-- 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior
-- ⚡ **Astro Optimized**: Built specifically for Astro framework
+- **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
+- **Customizable**: Extensive customization options for colors, sizes, and behavior
+- **Astro Optimized**: Built specifically for Astro framework
 
 
 ### Live demo
@@ -22,6 +22,16 @@ A dynamic, responsive header component for Astro projects that can switch betwee
  npm i @sofidevo/astro-dynamic-header
 ```
 
+## Required Dependencies
+
+You need to add the Iconify CDN to the head of your project for the hamburger menu icons to work properly:
+
+```html
+<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
+```
+
+Add this to your main layout or in the `<head>` section of your Astro pages.
+
 ## Quick Start
 
 ### Basic Usage
@@ -116,7 +126,10 @@ const menuItems = [
 | `headerType` | `"floating" \| "fullscreen"` | `"floating"` | Header layout style |
 | `logoSrc` | `string` | `"/logo.png"` | Logo image source |
 | `logoAlt` | `string` | `"Logo"` | Logo alt text |
-| `logoWidth` | `string` | `"120px"` | Logo width |
+| `logoWidth` | `string` | `"55px"` | Logo width |
+| `logoText` | `string` | `"Your logo text"` | Text displayed next to the logo |
+| `logoTextSize` | `string` | `"1em"` | Font size for logo text |
+| `logoTextColor` | `string` | `"#ffffff"` | Color for logo text |
 | `homeUrl` | `string` | `"/"` | Home page URL |
 | `menuItems` | `MenuItemType[]` | `[]` | Navigation menu items |
 | `backgroundColor` | `string` | `"#0d0d0dcc"` | Header background color |
@@ -135,18 +148,24 @@ interface MenuItemType {
 
 ## Slots Support
 
-The Header component provides two customizable slots that allow you to add additional content:
+The Header component provides a flexible slot system that allows 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 |
+|-----------|----------|------------|-----------|
+| `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) that appear in both desktop and mobile |
+
+### Actions Slot Behavior
+
+The `actions` slot is intelligent and automatically manages visibility:
+- **Desktop (≥768px)**: Shows actions in the main header after navigation
+- **Mobile (<768px)**: Shows same actions inside the mobile menu panel
+- **Automatic hiding**: Desktop version is hidden on mobile, mobile version is hidden on desktop
 
 ### Slot Examples
 
-#### Using Individual Slots
+#### Using the Actions Slot
 
 ```astro
 ---
@@ -158,32 +177,20 @@ const menuItems = [
 ];
 ---
 
-<!-- Adding content only to desktop header -->
 <Header
   headerType="floating"
   logoSrc="/logo.png"
+  logoText="My Company"
   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 slot="actions">
+    <button class="login-btn">Login</button>
+    <button class="signup-btn">Sign Up</button>
   </div>
 </Header>
 ```
 
-#### Using Both Slots Together
+#### Complete Example with All Props
 
 ```astro
 ---
@@ -200,64 +207,64 @@ const menuItems = [
   headerType="fullscreen"
   logoSrc="/logo.png"
   logoAlt="My Company"
-  logoWidth="150px"
+  logoWidth="60px"
+  logoText="My Company"
+  logoTextSize="1.2em"
+  logoTextColor="#ffffff"
   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 slot="actions" class="header-actions">
+    <button class="btn btn-outline">Login</button>
+    <button class="btn btn-primary">Get Started</button>
   </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:
+#### Styling Action Buttons
 
 ```css
-/* Hide desktop slot on mobile devices */
-@media (width < 768px) {
-  .cta-button {
-    display: none;
-  }
+.header-actions {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
 }
 
-/* Or create responsive variants */
-.desktop-only {
-  display: block;
+.btn {
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.2s ease;
 }
 
-@media (width < 768px) {
-  .desktop-only {
-    display: none;
-  }
+.btn-outline {
+  background: transparent;
+  color: #ffffff;
+  border: 1px solid #ffffff;
 }
-```
 
-```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>
-```
+.btn-outline:hover {
+  background: #ffffff;
+  color: #000000;
+}
+
+.btn-primary {
+  background: #00ffff;
+  color: #000000;
+}
 
+.btn-primary:hover {
+  background: #00cccc;
+}
+```
 ## Header Types
 
 ### Floating Header
@@ -338,10 +345,10 @@ If you encounter import errors, try these solutions:
 
 ### Compatibility
 
-- ✅ Astro 4.x and 5.x
-- ✅ SSG Projects (Static Site Generation)
-- ✅ SSR Projects (Server-Side Rendering)
-- ✅ Hybrid Projects (output: 'hybrid')
+- Astro 4.x and 5.x
+- SSG Projects (Static Site Generation)
+- SSR Projects (Server-Side Rendering)
+- Hybrid Projects (output: 'hybrid')
 
 ## Live Examples
 
@@ -391,4 +398,4 @@ MIT License - see the [LICENSE](./LICENSE) file for details.
 
 ## Support
 
-If you find this package helpful, please consider giving it a ⭐ on GitHub!
+If you find this package helpful, please consider giving it a star on GitHub!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -20,7 +20,8 @@
     "./HamburgerButton.astro": "./src/HamburgerButton.astro"
   },
   "files": [
-    "src",
+    "src/*.ts",
+    "src/*.astro",
     "README.md"
   ],
   "scripts": {
@@ -52,10 +53,10 @@
     "astro": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.0",
+    "@astrojs/check": "^0.9.6",
     "@types/jsdom": "^21.1.7",
     "@vitest/coverage-v8": "^3.2.4",
-    "astro": "^5.12.8",
+    "astro": "^5.16.11",
     "jsdom": "^26.1.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"

package/src/Header.astro

@@ -5,9 +5,14 @@ import MobileNav from "./MobileNav.astro";
 
 export interface Props {
   headerType?: "floating" | "fullscreen";
+  // properties for logo
   logoSrc?: string;
   logoAlt?: string;
   logoWidth?: string;
+  logoText?: string;
+  logoTextSize?: string;
+  logoTextColor?: string;
+  // properties for navigation
   homeUrl?: string;
   menuItems?: Array<{
     link: string;
@@ -21,6 +26,7 @@ export interface Props {
       }>;
     }>;
   }>;
+  // styles
   backgroundColor?: string;
   backdropBlur?: string;
   zIndex?: number;
@@ -30,7 +36,10 @@ const {
   headerType = "floating",
   logoSrc = "/logo.png",
   logoAlt = "Logo",
-  logoWidth = "120px",
+  logoWidth = "55px",
+  logoText = "Your logo text",
+  logoTextSize = "1em",
+  logoTextColor = "#ffffff",
   homeUrl = "/",
   menuItems = [],
   backgroundColor = "#0d0d0dcc",
@@ -84,20 +93,25 @@ const {
 
 <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}>
+    <a class="logo__container" href={homeUrl}>
       <img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
+      {logoText && <span class="header__logo-text" style={`color: ${logoTextColor}; font-size: ${logoTextSize};`}>{logoText}</span>}
     </a>
     <NavMenu menuItems={menuItems} />
-    <slot name="slot-desktop" />
+    <div class="actions-desktop">
+      <slot name="actions" />
+    </div>
     <HamburgerButton />
     <MobileNav menuItems={menuItems}  type={headerType}>
-      <slot name="slot-panel" slot="slot-panel" />
+      <div class="actions-mobile" slot="slot-panel">
+        <slot name="actions" />
+      </div>
     </MobileNav>
 
   </header>
 </div>
 
-<style>
+<style is:inline >
   /* Base styles for header container */
   .header__container {
     width: 100%;
@@ -115,7 +129,7 @@ const {
 
   /* Floating header container styles */
   .header__container--floating {
-    padding: 1rem;
+    padding: .5em;
   }
 
   /* Fullscreen header container styles */
@@ -129,10 +143,11 @@ const {
     align-items: center;
     width: 100%;
     justify-content: space-between;
+    padding: 1em 2em;
 
     @media (width < 768px) {
       align-self: flex-end;
-      padding: 0.4rem;
+      padding: 0.4em;
       margin: 0 auto;
     }
   }
@@ -140,8 +155,8 @@ const {
   /* Floating header styles */
   .header--floating {
     max-width: 1100px;
-    border-radius: 18px;
-    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    padding: .7em 1em;
 
     @media (width < 768px) {
       max-width: 95%;
@@ -151,19 +166,41 @@ const {
   /* Fullscreen header styles */
   .header--fullscreen {
     border-radius: 0;
-    padding: 1rem 2rem;
+    padding: 1em 2em;
 
     @media (width < 768px) {
       max-width: 100%;
-      padding: 0.8rem 1rem;
+      padding: 0.8em 1em;
     }
   }
 
+  .logo__container {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    & span{
+      font-weight: 600;
+    }
+  }
   .header__logo {
-    margin-right: 1rem;
+    margin-right: 1em;
     object-fit: contain;
   }
 
+  /* Actions visibility control */
+  .actions-desktop {
+    @media (width < 768px) {
+      display: none;
+    }
+  }
+
+  .actions-mobile {
+    margin-top: 20px;
+    @media (width >= 768px) {
+      display: none;
+    }
+  }
+
   /* Adjust transform for fullscreen header */
   .header--fullscreen .mobile-header__menu.is-active {
     transform: translate(0%);

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"

package/src/NavMenu.astro

@@ -33,10 +33,10 @@ const pagePathname = Astro.url.pathname;
 
       if (rect.right > viewportWidth) {
         subsubmenu.style.right = "100%";
-        subsubmenu.style.left = "auto";
+        subsubmenu.style.left = "0";
       } else {
         subsubmenu.style.left = "100%";
-        subsubmenu.style.right = "auto";
+        subsubmenu.style.right = "0";
       }
     });
   }
@@ -58,12 +58,12 @@ const pagePathname = Astro.url.pathname;
           (subsubmenu as HTMLElement).style.display = "block";
           (subsubmenu as HTMLElement).style.visibility = "hidden";
           (subsubmenu as HTMLElement).style.left = "100%";
-          (subsubmenu as HTMLElement).style.transform = "";
+          (subsubmenu as HTMLElement).style.transform = "auto";
 
           const rect = subsubmenu.getBoundingClientRect();
 
           if (rect.right > viewportWidth) {
-            (subsubmenu as HTMLElement).style.left = "-210%";
+            (subsubmenu as HTMLElement).style.left = "-100%";
             (subsubmenu as HTMLElement).style.right = "auto";
             const leftRect = subsubmenu.getBoundingClientRect();
 
@@ -86,7 +86,7 @@ const pagePathname = Astro.url.pathname;
 
           const isPositionedLeft =
             (subsubmenu as HTMLElement).style.left === "-100%";
-          const transformDirection = isPositionedLeft ? "-2rem" : "2rem";
+          const transformDirection = isPositionedLeft ? "-32px" : "32px";
 
           const currentTransform = (subsubmenu as HTMLElement).style.transform;
           if (currentTransform && currentTransform.includes("translateX")) {
@@ -182,7 +182,7 @@ const pagePathname = Astro.url.pathname;
   </ul>
 </nav>
 
-<style>
+<style is:inline>
   .header__menu {
     @media (width < 768px) {
       display: none;
@@ -202,10 +202,10 @@ const pagePathname = Astro.url.pathname;
 
   .menu__link {
     text-decoration: none;
-    padding: 0.5rem ;
+    padding: 0.5em ;
     display: flex;
     align-items: center;
-    gap: 0.8rem;
+    gap: 0.8em;
     color: color-mix(in srgb, var(--light-spot-color, #00ffff) 30%, white 70%);
     position: relative;
   }
@@ -244,9 +244,9 @@ const pagePathname = Astro.url.pathname;
     border: 0.5px solid #3e1c71;
     position: absolute;
     flex-direction: column;
-    gap: 0.4rem;
-    padding: 2rem 1rem;
-    border-radius: 0.6rem;
+    gap: 0.4em;
+    padding:  1em;
+    border-radius: 10px;
     transition: transform 0.3s ease-in-out;
     pointer-events: none;
     opacity: 0;
@@ -256,6 +256,7 @@ const pagePathname = Astro.url.pathname;
   .menu__item {
     padding: 6px;
     position: relative;
+    list-style: none;
   }
 
   .submenu a,
@@ -264,8 +265,8 @@ const pagePathname = Astro.url.pathname;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: 1rem;
-    border-radius: 0.4rem;
+    height: 64px;
+    border-radius: 6px;
     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: 26px;
   }
 
   .submenu__item--secondary a:hover,
@@ -287,18 +288,18 @@ const pagePathname = Astro.url.pathname;
   }
 
   .submenu {
-    padding: 0.9rem;
-    right: -23px;
+    padding: 0.9em;
+    right: calc(50% - 80px);
   }
 
   .submenu::after {
     content: "";
     position: absolute;
-    top: -4rem;
+    top: -4em;
     width: 100%;
     z-index: -3;
     pointer-events: none;
-    height: 10rem;
+    height: 10em;
   }
 
   .subsubmenu {
@@ -311,22 +312,22 @@ const pagePathname = Astro.url.pathname;
   .subsubmenu::before {
     content: "";
     position: absolute;
-    top: -4rem;
+    top: -4em;
     z-index: -1;
     pointer-events: none;
-    height: 10rem;
-    width: 20rem;
-    height: 14rem;
+    height: 10em;
+    width: 20em;
+    height: 14em;
   }
 
   .subsubmenu::after {
     content: "";
     position: absolute;
     top: -14px;
-    right: 3rem;
+    right: 3em;
     width: 100%;
     z-index: -3;
-    height: 21rem;
+    height: 21em;
   }
 
   .submenu li {
@@ -336,7 +337,7 @@ const pagePathname = Astro.url.pathname;
   .menu__item:hover > .submenu {
     opacity: 1;
     pointer-events: all;
-    transform: translateY(1.4rem);
+    transform: translateY(1.4em);
   }
 
   .menu__item:hover > .submenu::after {