@sofidevo/astro-dynamic-header 1.0.2 → 1.0.3

package/package.json

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

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;