@sofidevo/astro-dynamic-header 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SofiDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,186 @@
+# @sofidev/astro-dynamic-header
+
+A dynamic, responsive header component for Astro projects that can switch between floating and fullscreen styles with multi-level dropdown navigation support.
+
+## 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
+- 🚀 **TypeScript Support**: Full type safety and IntelliSense
+- 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior
+- ⚡ **Astro Optimized**: Built specifically for Astro framework
+
+## Installation
+
+```bash
+npm install @sofidev/astro-dynamic-header
+```
+
+## Quick Start
+
+### Basic Usage
+
+```astro
+---
+import Header from '@sofidev/astro-dynamic-header/Header.astro';
+
+const menuItems = [
+  { link: '/about', text: 'About' },
+  { link: '/contact', text: 'Contact' },
+];
+---
+
+<Header
+  headerType="floating"
+  logoSrc="/logo.png"
+  menuItems={menuItems}
+/>
+```
+
+### Advanced Usage
+
+```astro
+---
+import Header from '@sofidev/astro-dynamic-header/Header.astro';
+
+const menuItems = [
+  {
+    link: '#',
+    text: 'Services',
+    submenu: [
+      {
+        link: '#',
+        text: 'Web Development',
+        submenu: [
+          { link: '/web/frontend', text: 'Frontend' },
+          { link: '/web/backend', text: 'Backend' },
+          { link: '/web/fullstack', text: 'Full Stack' },
+        ],
+      },
+      { link: '/design', text: 'Design' },
+      { link: '/consulting', text: 'Consulting' },
+    ],
+  },
+  { link: '/about', text: 'About' },
+  { 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}
+/>
+```
+
+## Component Props
+
+### Header Component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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 |
+| `homeUrl` | `string` | `"/"` | Home page URL |
+| `menuItems` | `MenuItemType[]` | `[]` | Navigation menu items |
+| `backgroundColor` | `string` | `"#0d0d0dcc"` | Header background color |
+| `backdropBlur` | `string` | `"blur(20px)"` | Backdrop filter blur |
+| `zIndex` | `number` | `10` | CSS z-index value |
+
+### Menu Item Structure
+
+```typescript
+interface MenuItemType {
+  link: string;
+  text: string;
+  submenu?: MenuItemType[];
+}
+```
+
+## Header Types
+
+### Floating Header
+- Centered with max-width constraint
+- Rounded corners
+- Padding around container
+- Perfect for modern, card-like designs
+
+### Fullscreen Header
+- Full viewport width
+- No border radius
+- Edge-to-edge design
+- Ideal for traditional website layouts
+
+## Individual Components
+
+You can also import and use components individually:
+
+```astro
+---
+import NavMenu from '@sofidev/astro-dynamic-header/NavMenu.astro';
+import MobileNav from '@sofidev/astro-dynamic-header/MobileNav.astro';
+import HamburgerButton from '@sofidev/astro-dynamic-header/HamburgerButton.astro';
+---
+
+<NavMenu menuItems={menuItems} showHomeLink={true} homeText="Home" />
+<MobileNav menuItems={menuItems} accentColor="#00ffff" />
+<HamburgerButton color="#ffffff" />
+```
+
+## Styling and Customization
+
+The component uses CSS custom properties that you can override:
+
+```css
+:root {
+  --light-spot-color: #00ffff;
+  --color-tertiary: #ffffff;
+  --color-hamburger-lines: #ffffff;
+}
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported interfaces:
+
+```typescript
+import type {
+  MenuItemType,
+  HeaderProps,
+  NavMenuProps,
+  MobileNavProps,
+  HamburgerButtonProps
+} from '@sofidev/astro-dynamic-header';
+```
+
+## Browser Support
+
+- All modern browsers
+- Mobile responsive design
+- Supports CSS `backdrop-filter`
+- Graceful degradation for older browsers
+
+## Live Examples
+
+Visit our demo website to see the component in action with interactive examples and complete documentation.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - see the [LICENSE](./LICENSE) file for details.
+
+## Support
+
+If you find this package helpful, please consider giving it a ⭐ on GitHub!

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@sofidevo/astro-dynamic-header",
+  "version": "1.0.0",
+  "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./Header": "./src/Header.astro",
+    "./NavMenu": "./src/NavMenu.astro",
+    "./MobileNav": "./src/MobileNav.astro",
+    "./HamburgerButton": "./src/HamburgerButton.astro",
+    "./Header.astro": "./src/Header.astro",
+    "./NavMenu.astro": "./src/NavMenu.astro",
+    "./MobileNav.astro": "./src/MobileNav.astro",
+    "./HamburgerButton.astro": "./src/HamburgerButton.astro"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "astro-package build",
+    "dev": "astro-package dev",
+    "check": "astro check",
+    "check:watch": "astro check --watch"
+  },
+  "keywords": [
+    "astro",
+    "component",
+    "header",
+    "navigation",
+    "responsive",
+    "typescript",
+    "dynamic",
+    "floating",
+    "sofidev",
+    "fullscreen"
+  ],
+  "author": "SofiDev contact@sofidev.top",
+  "license": "MIT",
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.0",
+    "astro": "^5.12.8",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SofiDevO/astro-dynamic-header"
+  },
+  "bugs": {
+    "url": "https://github.com/SofiDevO/astro-dynamic-header/issues"
+  },
+  "homepage": "https://github.com/SofiDevO/astro-dynamic-header#readme"
+}

package/src/HamburgerButton.astro

@@ -0,0 +1,117 @@
+---
+export interface Props {
+  color?: string;
+}
+
+const { color = "var(--color-hamburger-lines, #fff)" } = Astro.props;
+---
+
+<button
+  class="hamburger hamburger--collapse"
+  type="button"
+  id="hamburger-btn"
+  style={`--hamburger-color: ${color};`}
+>
+  <span class="hamburger-box">
+    <span class="hamburger-inner"></span>
+  </span>
+</button>
+
+<style>
+  .hamburger {
+    display: none;
+    font: inherit;
+    overflow: visible;
+    margin: 0;
+    padding: 15px;
+    cursor: pointer;
+    transition-timing-function: linear;
+    transition-duration: 0.15s;
+    transition-property: opacity, filter;
+    text-transform: none;
+    color: inherit;
+    border: 0;
+    background-color: transparent;
+
+    @media screen and (max-width: 768px) {
+      z-index: 1000;
+      display: inline-block;
+    }
+  }
+
+  .hamburger-box {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+  }
+
+  .hamburger-inner {
+    top: 50%;
+    display: block;
+    margin-top: -2px;
+  }
+
+  .hamburger-inner:after,
+  .hamburger-inner:before {
+    display: block;
+    content: "";
+  }
+
+  .hamburger-inner,
+  .hamburger-inner::before,
+  .hamburger-inner::after {
+    background-color: var(--hamburger-color, var(--color-hamburger-lines, #fff));
+    position: absolute;
+    width: 40px;
+    height: 4px;
+    transition-timing-function: ease;
+    transition-duration: 0.15s;
+    transition-property: transform;
+    border-radius: 4px;
+  }
+
+  .hamburger-inner:before {
+    top: -10px;
+  }
+
+  .hamburger-inner:after {
+    bottom: -10px;
+  }
+
+  .hamburger--collapse .hamburger-inner {
+    top: auto;
+    bottom: 0;
+    transition-delay: 0.13s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.13s;
+  }
+
+  .hamburger--collapse .hamburger-inner:before {
+    transition: top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .hamburger--collapse .hamburger-inner:after {
+    top: -20px;
+    transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, opacity 0.1s linear;
+  }
+
+  /* Animation */
+  .hamburger--collapse.is-active .hamburger-inner {
+    transition-delay: 0.22s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, -10px, 0) rotate(-45deg);
+  }
+
+  .hamburger--collapse.is-active .hamburger-inner:before {
+    top: 0;
+    transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.16s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
+    transform: rotate(-90deg);
+  }
+
+  .hamburger--collapse.is-active .hamburger-inner:after {
+    top: 0;
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s linear 0.22s;
+    opacity: 0;
+  }
+</style>

package/src/Header.astro

@@ -0,0 +1,150 @@
+---
+import HamburgerButton from "./HamburgerButton.astro";
+import NavMenu from "./NavMenu.astro";
+import MobileNav from "./MobileNav.astro";
+
+export interface Props {
+  headerType?: "floating" | "fullscreen";
+  logoSrc?: string;
+  logoAlt?: string;
+  logoWidth?: string;
+  homeUrl?: string;
+  menuItems?: Array<{
+    link: string;
+    text: string;
+    submenu?: Array<{
+      link: string;
+      text: string;
+      submenu?: Array<{
+        link: string;
+        text: string;
+      }>;
+    }>;
+  }>;
+  backgroundColor?: string;
+  backdropBlur?: string;
+  zIndex?: number;
+}
+
+const {
+  headerType = "floating",
+  logoSrc = "/logo.png",
+  logoAlt = "Logo",
+  logoWidth = "120px",
+  homeUrl = "/",
+  menuItems = [],
+  backgroundColor = "#0d0d0dcc",
+  backdropBlur = "blur(20px)",
+  zIndex = 10
+} = Astro.props;
+---
+
+<script>
+  class HamburgerController {
+    private hamburgerBtn: HTMLElement | null;
+    private mobileMenu: HTMLElement | null;
+
+    constructor() {
+      this.hamburgerBtn = document.getElementById("hamburger-btn");
+      this.mobileMenu = document.getElementById("mobile-header-menu");
+      this.init();
+    }
+
+    private init(): void {
+      if (this.hamburgerBtn && this.mobileMenu) {
+        this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
+      }
+    }
+
+    private toggleMenu(): void {
+      if (this.hamburgerBtn && this.mobileMenu) {
+        this.hamburgerBtn.classList.toggle("is-active");
+        this.mobileMenu.classList.toggle("is-active");
+      }
+    }
+  }
+
+  // Auto-initialize when DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    new HamburgerController();
+  });
+</script>
+
+<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}>
+      <img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
+    </a>
+    <NavMenu menuItems={menuItems} />
+    <HamburgerButton />
+    <MobileNav menuItems={menuItems} />
+  </header>
+</div>
+
+<style>
+  /* Base styles for header container */
+  .header__container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    position: fixed;
+
+    @media (width < 768px) {
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  /* Floating header container styles */
+  .header__container--floating {
+    padding: 16px;
+  }
+
+  /* Fullscreen header container styles */
+  .header__container--fullscreen {
+    padding: 0;
+  }
+
+  /* Base styles for header */
+  .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+
+    @media (width < 768px) {
+      align-self: flex-end;
+      padding: 0.4rem;
+      margin: 0 auto;
+    }
+  }
+
+  /* Floating header styles */
+  .header--floating {
+    max-width: 1100px;
+    border-radius: 18px;
+    padding: 0.5rem 1rem;
+
+    @media (width < 768px) {
+      max-width: 95%;
+    }
+  }
+
+  /* Fullscreen header styles */
+  .header--fullscreen {
+    border-radius: 0;
+    padding: 1rem 2rem;
+
+    @media (width < 768px) {
+      max-width: 100%;
+      padding: 0.8rem 1rem;
+    }
+  }
+
+  .header__logo {
+    margin-right: 1rem;
+    object-fit: contain;
+  }
+</style>

package/src/MobileNav.astro

@@ -0,0 +1,201 @@
+---
+export interface Props {
+  menuItems?: Array<{
+    link: string;
+    text: string;
+    submenu?: Array<{
+      link: string;
+      text: string;
+      submenu?: Array<{
+        link: string;
+        text: string;
+      }>;
+    }>;
+  }>;
+  showHomeLink?: boolean;
+  homeText?: string;
+  accentColor?: string;
+}
+
+const {
+  menuItems = [],
+  showHomeLink = true,
+  homeText = "Home",
+  accentColor = "var(--light-spot-color, #00ffff)"
+} = Astro.props;
+
+const pagePathname = Astro.url.pathname;
+---
+
+<nav class="mobile-header__menu" id="mobile-header-menu" style={`--mobile-accent-color: ${accentColor};`}>
+  <ol class="mobile-menu">
+    {showHomeLink && pagePathname !== "/" && (
+      <li class="header__item mobile-header__item">
+        <a class="menu__link mobile-menu__link" href="/" data-astro-prefetch="hover">
+          {homeText}
+        </a>
+      </li>
+    )}
+    {menuItems.map((item) => (
+      <li>
+        {item.submenu ? (
+          <details class="mobile-details">
+            <summary class="menu__summary">
+              {item.text}
+              <iconify-icon
+                class="iconify-arrow"
+                icon="codicon:triangle-down"
+                width="15"
+                height="15"
+                style={`color: ${accentColor};`}
+              />
+            </summary>
+            <ol class="mobile-submenu">
+              {item.submenu.map((sub) => (
+                <li>
+                  {sub.submenu && sub.submenu.length > 0 ? (
+                    <details class="mobile-details">
+                      <summary class="menu__summary">
+                        {sub.text}
+                        <iconify-icon
+                          class="iconify-arrow"
+                          icon="codicon:triangle-down"
+                          width="15"
+                          height="15"
+                          style={`color: ${accentColor};`}
+                        />
+                      </summary>
+                      <ol class="mobile-subsubmenu">
+                        {sub.submenu.map((subsub) => (
+                          <li class="mobile-submenu__item secondary">
+                            <a class="menu__link mobile-menu__link" href={subsub.link}>{subsub.text}</a>
+                          </li>
+                        ))}
+                      </ol>
+                    </details>
+                  ) : (
+                    <a class="menu__link mobile-menu__link" href={sub.link}>{sub.text}</a>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </details>
+        ) : (
+          <a class="mobile-menu__link" href={item.link}>
+            {item.text}
+          </a>
+        )}
+      </li>
+    ))}
+  </ol>
+</nav>
+
+<style>
+  .mobile-header__menu {
+    display: none;
+
+    @media (width < 768px) {
+      display: flex;
+      flex-direction: column;
+      width: 104vw;
+      height: 100dvh;
+      position: fixed;
+      top: -16px;
+      left: 0;
+      background: #151515;
+      z-index: 20;
+      transition: transform 0.3s ease-in-out;
+      transform: translateX(100%);
+      padding: 10rem 2rem 2rem;
+      color: var(--mobile-accent-color);
+    }
+
+    a {
+      color: var(--mobile-accent-color);
+    }
+  }
+
+  .mobile-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-height: 76dvh;
+    overflow-y: auto;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .mobile-menu li a {
+    border: solid 1px color-mix(in srgb, var(--mobile-accent-color) 20%, transparent);
+    border-radius: 4px;
+    width: 100%;
+    height: 4rem;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    text-decoration: none;
+  }
+
+  .mobile-details {
+    width: 100%;
+    interpolate-size: allow-keywords;
+  }
+
+  .mobile-details summary {
+    background: linear-gradient(to right, color-mix(in srgb, var(--mobile-accent-color) 20%, transparent), transparent);
+    border-radius: 4px;
+    width: 100%;
+    height: 4rem;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .mobile-details::details-content {
+    transition:
+      height 0.5s ease,
+      opacity 0.5s ease,
+      content-visibility 0.5s allow-discrete;
+    opacity: 0;
+    height: 0;
+    overflow: clip;
+  }
+
+  .mobile-details:open iconify-icon {
+    transform: rotate(180deg);
+  }
+
+  .mobile-details:open::details-content {
+    height: auto;
+    opacity: 1;
+  }
+
+  .mobile-submenu,
+  .mobile-subsubmenu {
+    border-left: dashed 1px var(--mobile-accent-color);
+    padding-left: 2rem;
+    margin-left: 1rem;
+    margin-top: 1rem;
+    list-style: none;
+  }
+
+  .mobile-header__menu.is-active {
+    transform: translateX(-7%);
+  }
+
+  .menu__summary {
+    width: 100%;
+    font-size: 1.7rem;
+    height: 5rem;
+    color: #fff;
+    display: flex;
+    align-items: center;
+  }
+</style>

package/src/NavMenu.astro

@@ -0,0 +1,279 @@
+---
+export interface Props {
+  menuItems?: Array<{
+    link: string;
+    text: string;
+    submenu?: Array<{
+      link: string;
+      text: string;
+      submenu?: Array<{
+        link: string;
+        text: string;
+      }>;
+    }>;
+  }>;
+  showHomeLink?: boolean;
+  homeText?: string;
+}
+
+const {
+  menuItems = [],
+  showHomeLink = true,
+  homeText = "Home"
+} = Astro.props;
+
+const pagePathname = Astro.url.pathname;
+---
+
+<script>
+  function adjustSubsubmenuPositionOnResize() {
+    const subsubmenus = document.querySelectorAll('.subsubmenu') as NodeListOf<HTMLElement>;
+
+    subsubmenus.forEach((subsubmenu) => {
+      const rect = subsubmenu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+
+      if (rect.right > viewportWidth) {
+        subsubmenu.style.right = '100%';
+        subsubmenu.style.left = 'auto';
+      } else {
+        subsubmenu.style.left = '100%';
+        subsubmenu.style.right = 'auto';
+      }
+    });
+  }
+
+  window.addEventListener('resize', adjustSubsubmenuPositionOnResize);
+  document.addEventListener('DOMContentLoaded', adjustSubsubmenuPositionOnResize);
+</script>
+
+<nav class="header__menu" id="header-menu">
+  <ul class="menu">
+    {showHomeLink && pagePathname !== "/" && (
+      <li class="header__item">
+        <a class="menu__link" href="/" data-astro-prefetch="hover">
+          {homeText}
+        </a>
+      </li>
+    )}
+    {menuItems.map((item) => (
+      <li class="menu__item">
+        <a class="menu__link" href={item.link}>
+          {item.text}
+          {item.submenu && (
+            <iconify-icon
+              class="iconify-arrow"
+              icon="codicon:triangle-down"
+              width="15"
+              height="15"
+            />
+          )}
+        </a>
+        {item.submenu && (
+          <ul class="submenu">
+            {item.submenu.map((sub) => (
+              <li class="submenu__item submenu__item--secondary">
+                <a href={sub.link}>
+                  {sub.text}
+                  {sub.submenu && sub.submenu.length > 0 && (
+                    <iconify-icon
+                      class="iconify-arrow"
+                      icon="codicon:triangle-down"
+                      width="15"
+                      height="15"
+                    />
+                  )}
+                </a>
+                {sub.submenu && (
+                  <ul class="subsubmenu">
+                    {sub.submenu.map((subsub) => (
+                      <li class="submenu__item--tertiary">
+                        <a href={subsub.link}>{subsub.text}</a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  .header__menu {
+    @media (width < 768px) {
+      display: none;
+    }
+  }
+
+  .menu {
+    padding: 1rem;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    @media (width < 768px) {
+      flex-direction: column;
+    }
+  }
+
+  .menu__link {
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    color: color-mix(in srgb, var(--light-spot-color, #00ffff) 30%, white 70%);
+    position: relative;
+  }
+
+  @media screen and (min-width: 768px) {
+    .menu__link::after {
+      position: absolute;
+      top: 25px;
+      left: 0;
+      content: "";
+      width: 100%;
+      transform: scale(0);
+      transform-origin: 1;
+      height: 2px;
+      transition: transform 0.3s ease;
+      background: var(--light-spot-color, #00ffff);
+    }
+
+    .menu__link:hover::after {
+      transform: scale(1);
+    }
+  }
+
+  .iconify-arrow {
+    transition: transform 0.3s linear;
+  }
+
+  .menu__link:hover > .iconify-arrow {
+    transform: rotate(180deg);
+  }
+
+  .submenu,
+  .subsubmenu {
+    color: color-mix(in srgb, var(--light-spot-color, #00ffff) 20%, white 80%);
+    background-color: #171717;
+    border: 0.5px solid #3e1c71;
+    position: absolute;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 2rem 1rem;
+    border-radius: 0.6rem;
+    transition: transform 0.3s ease-in-out;
+    pointer-events: none;
+    opacity: 0;
+    text-wrap: nowrap;
+  }
+
+  .menu__item {
+    padding: 6px;
+    position: relative;
+  }
+
+  .submenu a,
+  .subsubmenu a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 4rem;
+    border-radius: .4rem;
+    color: #fff;
+    color: var(--color-tertiary, #fff);
+  }
+
+  .submenu__item--secondary,
+  .submenu__item--tertiary {
+    position: relative;
+  }
+
+  .submenu__item--secondary a,
+  .submenu__item--tertiary a {
+    padding: 2rem;
+  }
+
+  .submenu__item--secondary a:hover,
+  .submenu__item--tertiary a:hover {
+    background: rgb(71, 70, 70);
+    color: white;
+  }
+
+  .submenu {
+    padding: 1rem;
+    right: -23px;
+  }
+
+  .submenu::after {
+    content: "";
+    position: absolute;
+    top: -4rem;
+    width: 100%;
+    z-index: -3;
+    pointer-events: none;
+    height: 10rem;
+  }
+
+  .subsubmenu {
+    top: 0;
+    left: auto;
+    right: auto;
+    min-width: 193px;
+  }
+
+  .subsubmenu::before {
+    content: "";
+    position: absolute;
+    top: -4rem;
+    z-index: -1;
+    pointer-events: none;
+    height: 10rem;
+    width: 20rem;
+    height: 14rem;
+  }
+
+  .subsubmenu::after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: 3rem;
+    width: 100%;
+    z-index: -3;
+    height: 21rem;
+  }
+
+  .submenu li {
+    width: 100%;
+  }
+
+  .menu__item:hover > .submenu {
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(2.5rem);
+  }
+
+  .menu__item:hover > .submenu::after {
+    pointer-events: all;
+  }
+
+  .submenu li:hover > .subsubmenu {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .submenu li:hover > .subsubmenu::before {
+    pointer-events: all;
+  }
+
+  .submenu li:hover > .subsubmenu::after {
+    pointer-events: all;
+  }
+</style>

package/src/hamburger.ts

@@ -0,0 +1,44 @@
+export class HamburgerButton {
+  private hamburgerBtn: HTMLElement | null;
+  private mobileMenu: HTMLElement | null;
+
+  constructor() {
+    this.hamburgerBtn = document.getElementById("hamburger-btn");
+    this.mobileMenu = document.getElementById("mobile-header-menu");
+    this.init();
+  }
+
+  private init(): void {
+    if (this.hamburgerBtn && this.mobileMenu) {
+      this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
+    }
+  }
+
+  private toggleMenu(): void {
+    if (this.hamburgerBtn && this.mobileMenu) {
+      this.hamburgerBtn.classList.toggle("is-active");
+      this.mobileMenu.classList.toggle("is-active");
+    }
+  }
+
+  public openMenu(): void {
+    if (this.hamburgerBtn && this.mobileMenu) {
+      this.hamburgerBtn.classList.add("is-active");
+      this.mobileMenu.classList.add("is-active");
+    }
+  }
+
+  public closeMenu(): void {
+    if (this.hamburgerBtn && this.mobileMenu) {
+      this.hamburgerBtn.classList.remove("is-active");
+      this.mobileMenu.classList.remove("is-active");
+    }
+  }
+}
+
+// Auto-initialize when DOM is ready
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    new HamburgerButton();
+  });
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+// TypeScript utilities
+export { HamburgerButton as HamburgerButtonController } from './hamburger';
+
+// Types
+export interface MenuItemType {
+  link: string;
+  text: string;
+  submenu?: MenuItemType[];
+}
+
+export interface HeaderProps {
+  headerType?: "floating" | "fullscreen";
+  logoSrc?: string;
+  logoAlt?: string;
+  logoWidth?: string;
+  homeUrl?: string;
+  menuItems?: MenuItemType[];
+  backgroundColor?: string;
+  backdropBlur?: string;
+  zIndex?: number;
+}
+
+export interface NavMenuProps {
+  menuItems?: MenuItemType[];
+  showHomeLink?: boolean;
+  homeText?: string;
+}
+
+export interface MobileNavProps {
+  menuItems?: MenuItemType[];
+  showHomeLink?: boolean;
+  homeText?: string;
+  accentColor?: string;
+}
+
+export interface HamburgerButtonProps {
+  color?: string;
+}