npm - @sofidevo/astro-dynamic-header - Versions diffs - 3.0.1 → 3.1.0 - Mend

@sofidevo/astro-dynamic-header 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -1,505 +1,275 @@
 # @sofidevo/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.
-> [!WARNING]
-> **Breaking Changes — v2.2+**: The `logo` prop has been removed in favor of a much more flexible `logo` slot. The `color` prop has also been removed from the `HamburgerButton` component to ensure flawless dark mode synchronization. The `theme` property behavior was also refactored to prioritize native CSS variables, reducing DOM bloat and enabling purely CSS-based customization. See the [Changelog](#changelog) section below.
-> [!WARNING]
-> **Breaking Changes — v2.0+**: The `logo` and `navigation` props were restructured from strings/arrays to configuration objects. See the [Component Props](#component-props) and [Comprehensive Example](#comprehensive-example) to migrate.
-> [!NOTE]
-> **What's new — v2.1**: `CustomClassNames` has been renamed `HeaderClassNames` (the old name still works as an alias). New nested class props added to `LogoConfig` and `NavConfig`. New `mobileNav` slot in `HeaderClassNames`. `defaultThemes` is now exported for use outside the component. See the [Changelog](#changelog) section below.
+A dynamic, responsive header component for Astro projects. Supports floating and fullscreen layouts, multi-level dropdown navigation, native CSS variable customization, dark mode, and TypeScript — all with zero external icon dependencies.
 ## 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
-- **Two-layer customization**: High-level `classNames` prop + fine-grained nested class props inside `navigation` and `logo`
-- **Exportable defaults**: Import and extend `defaultThemes` from your own code
-- **Astro Optimized**: Built specifically for Astro framework
+- **Floating & Fullscreen layouts** — switch layouts with a single prop.
+- **Fully Responsive** — mobile-first accordion dropdowns with optimized hit targets.
+- **3-level Dropdowns** — top, secondary, and tertiary nested navigation items.
+- **Dark Mode Ready** — auto-detects `.dark` on `<html>`, or forces a state with `preset`.
+- **Inline SVG Icons** — no external CDNs, no extra network requests, no flash of missing icons.
+- **Slot Support** — inject your custom logo and header actions directly into slots.
+- **Pure CSS Customization** — customize background, blur, and colors using native CSS variables.
+- **Full TypeScript** — all props and config interfaces are fully typed.
-### Live demo
+### Live Demo
 [https://base-astro-psi.vercel.app/fullscreen-demo](https://base-astro-psi.vercel.app/fullscreen-demo)
+---
 ## Installation
 ```bash
- npm i @sofidevo/astro-dynamic-header
+npm i @sofidevo/astro-dynamic-header
 ```
-## Required Dependencies
+No external CDN scripts or stylesheet additions are required.
-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 (Automatic Theme)
-By default, the header uses `preset="auto"`, which automatically detects the theme based on a `.dark` class on your root element (`html` or `body`).
 ```astro
 ---
 import Header from '@sofidevo/astro-dynamic-header/Header';
 const menuItems = [
   { link: '/about', text: 'About' },
+  { link: '/contact', text: 'Contact' },
 ];
 ---
-<!-- Detects .dark class on root automatically -->
-<Header navigation={{ menuItems }} />
+<Header navigation={{ menuItems }}>
+  <a slot="logo" href="/">MyLogo</a>
+</Header>
 ```
-### Advanced Usage (Dual-Theme Customization)
-You can provide custom colors for both light and dark modes simultaneously.
-```astro
 ---
-import Header from '@sofidevo/astro-dynamic-header/Header';
-const navigation = {
-  menuItems: [
-    { link: '/about', text: 'About' },
-  ]
-};
-const theme = {
-  light: {
-    accentColor: "#3e1c71",
-    backgroundColor: "rgba(255, 255, 255, 0.8)"
-  },
-  dark: {
-    accentColor: "#00ffff",
-    backgroundColor: "rgba(20, 20, 20, 0.9)"
-  }
-};
----
-<Header
-  preset="auto"
-  theme={theme}
-  navigation={navigation}
-/>
-```
 ## Component Props
-### Header Component
+### `<Header>`
-| Prop         | Type                          | Default      | Description                                    |
-| ------------ | ----------------------------- | ------------ | ---------------------------------------------- |
-| `headerType` | `"floating" \| "fullscreen"`  | `"floating"` | Header layout style                            |
-| `preset`     | `"light" \| "dark" \| "auto"` | `"auto"`     | Theme behavior. `auto` follows root class.     |
-| `navigation` | `NavConfig`                   | `{}`         | Navigation configuration object                |
-| `theme`      | `DualThemeConfig`             | `{}`         | Custom theme overrides for light/dark          |
-| `classNames` | `HeaderClassNames`            | `{}`         | High-level class overrides for layout elements |
+| Prop         | Type                          | Default      | Description                                       |
+| ------------ | ----------------------------- | ------------ | ------------------------------------------------- |
+| `headerType` | `"floating" \| "fullscreen"`  | `"floating"` | Layout style                                      |
+| `preset`     | `"light" \| "dark" \| "auto"` | `"auto"`     | Theme mode. `"auto"` follows `.dark` on `<html>`. |
+| `navigation` | `NavConfig`                   | `{}`         | Menu items, home link, and custom CSS classes     |
+| `theme`      | `DualThemeConfig`             | `{}`         | Optional theme overrides (prefer CSS variables)   |
+| `classNames` | `HeaderClassNames`            | `{}`         | Inject CSS classes into structural elements       |
-### Config Objects
+---
-#### DualThemeConfig
+## Configuration Objects
-| Propery | Type          | Description                  |
-| ------- | ------------- | ---------------------------- |
-| `light` | `ThemeConfig` | Styles applied in light mode |
-| `dark`  | `ThemeConfig` | Styles applied in dark mode  |
+### `NavConfig`
-#### ThemeConfig
+| Property              | Type         | Default | Description                                             |
+| --------------------- | ------------ | ------- | ------------------------------------------------------- |
+| `menuItems`           | `MenuItem[]` | `[]`    | Top-level navigation items                              |
+| `homeUrl`             | `string`     | `"/"`   | URL for the home link                                   |
+| `header__menu__class` | `string`     | —       | Extra CSS class(es) for the desktop `<nav>` element     |
+| `header__item__class` | `string`     | —       | Extra CSS class(es) for each top-level `<li>` menu item |
+| `menu__link__class`   | `string`     | —       | Extra CSS class(es) for each top-level `<a>` link       |
-| Propery                 | Type     | Default          |
-| ----------------------- | -------- | ---------------- |
-| `backgroundColor`       | `string` | _Preset default_ |
-| `backgroundColorOpaque` | `string` | _Preset default_ |
-| `backdropBlur`          | `string` | `"blur(20px)"`   |
-| `zIndex`                | `number` | `10`             |
-| `textColor`             | `string` | _Preset default_ |
-| `accentColor`           | `string` | _Preset default_ |
+### `MenuItem`
-> [!IMPORTANT]
-> **Transparency vs Solid Submenus**: To ensure the best UI and avoid rendering bugs with `backdrop-filter` on nested elements, submenus and the mobile navigation panel are **solid/opaque**.
->
-> If you use a transparent `backgroundColor` (e.g., `rgba`), remember to also provide its solid counterpart in `backgroundColorOpaque`.
+| Property  | Type                  | Required | Description                       |
+| --------- | --------------------- | -------- | --------------------------------- |
+| `link`    | `string`              | ✅       | URL the item points to            |
+| `text`    | `string`              | ✅       | Display label                     |
+| `submenu` | `SecondaryMenuItem[]` | —        | Optional nested items (2nd level) |
-```astro
-<Header theme={{
-  light: {
-    backgroundColor: "rgba(255, 255, 255, 0.7)", // Transparent header body
-    backgroundColorOpaque: "#ffffff",            // Solid submenus
-  }
-}} />
-```
+### `SecondaryMenuItem`
-#### CustomClassNames → HeaderClassNames
+| Property  | Type                 | Required | Description                       |
+| --------- | -------------------- | -------- | --------------------------------- |
+| `link`    | `string`             | ✅       | URL the item points to            |
+| `text`    | `string`             | ✅       | Display label                     |
+| `submenu` | `TertiaryMenuItem[]` | —        | Optional nested items (3rd level) |
-> [!NOTE]
-> `CustomClassNames` was renamed to `HeaderClassNames` in v2.1. The old name still works as a type alias — no migration required.
+### `TertiaryMenuItem`
-The `classNames` prop targets the **structural wrapper elements** of the Header. For fine-grained control of individual nav links or the logo internals, use the nested `xxx__class` props inside the `navigation` or `logo` config objects instead.
+| Property | Type     | Required | Description            |
+| -------- | -------- | -------- | ---------------------- |
+| `link`   | `string` | ✅       | URL the item points to |
+| `text`   | `string` | ✅       | Display label          |
-| Property    | Target Element                                | Purpose & Common Use Cases                                                                                      |
-| ----------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `container` | Outer `div` wrapping the header               | **Positioning & Layout**: `top-0`, `z-50`, `fixed`, adjusting `max-width` and `mx-auto` logic.                  |
-| `header`    | Inner `<header>` element                      | **Appearance**: Shadows (`shadow-md`), borders (`border-b`), or custom transition durations.                    |
-| `logo`      | `<a>` tag surrounding the logo                | **Interactions**: Hover states, custom focus rings, or adjusting the flex alignment of the logo group.          |
-| `logoText`  | `<span>` tag containing the logo text         | **Typography**: Font weights, text shadows, or specific tracking/leading classes.                               |
-| `nav`       | `<div>` wrapping the desktop navigation items | **Desktop Layout**: Spacing between the logo and the menu, or responsive visibility classes (`hidden md:flex`). |
-| `mobileNav` | Root `<nav>` of the mobile slide-in panel     | **Mobile Panel**: Extra backdrop blur, custom z-index, slide-in overrides.                                      |
+---
-##### Usage Examples
+## Custom Class Names
-**Premium Shadow & Border:**
+The `classNames` prop lets you inject CSS classes into specific structural elements.
-```astro
-<Header
-  classNames={{
-    header: "shadow-xl border-b border-black/5 dark:border-white/10 transition-all duration-500",
-    container: "top-4 px-6",
-    mobileNav: "backdrop-blur-md",
-  }}
-/>
-```
+### `HeaderClassNames`
-**Custom Typography & Nav Spacing:**
+| Property    | Target element                         | Common use cases                                  |
+| ----------- | -------------------------------------- | ------------------------------------------------- |
+| `container` | Outer `<div>` wrapping the header      | Positioning, padding, `z-index`                   |
+| `header`    | Inner `<header>` element               | Shadows, borders, transitions                     |
+| `logo`      | `<a>` tag surrounding the logo slot    | Hover effects, focus rings                        |
+| `logoText`  | `<span>` containing the logo text      | Font weight, tracking, text transforms            |
+| `nav`       | `<div>` wrapping the desktop nav items | Spacing, alignment, responsive visibility         |
+| `mobileNav` | Root `<nav>` of the mobile panel       | Backdrop blur, custom z-index, slide-in overrides |
 ```astro
+<!-- Tailwind example -->
 <Header
   classNames={{
-    logoText: "tracking-tighter font-black italic uppercase",
-    nav: "ml-auto gap-8",
+    header: "shadow-xl border-b border-black/5 dark:border-white/10",
+    container: "top-4 px-6",
+    mobileNav: "backdrop-blur-md",
   }}
 />
 ```
-> [!TIP]
-> Since these classes are injected using Astro's `class:list`, you can also pass objects or arrays if you need conditional logic for your custom classes.
-#### NavConfig
-| Property              | Type         | Description                                             |
-| --------------------- | ------------ | ------------------------------------------------------- |
-| `homeUrl`             | `string`     | URL for the home link (defaults to `/`)                 |
-| `menuItems`           | `MenuItem[]` | Array of navigation menu items                          |
-| `header__menu__class` | `string`     | Extra CSS class(es) for the desktop `<nav>` element     |
-| `header__item__class` | `string`     | Extra CSS class(es) for each top-level `<li>` menu item |
-| `menu__link__class`   | `string`     | Extra CSS class(es) for each top-level `<a>` link       |
-#### MenuItem
-| Property  | Type                  | Description                         |
-| --------- | --------------------- | ----------------------------------- |
-| `link`    | `string`              | URL the menu item points to         |
-| `text`    | `string`              | Label text for the menu item        |
-| `submenu` | `SecondaryMenuItem[]` | Optional array of nested menu items |
-## Slots Support
-The Header component provides a flexible slot system that allows you to add additional content:
-### Available Slots
+---
-| Slot Name | Location              | Visibility            | Description                              |
-| --------- | --------------------- | --------------------- | ---------------------------------------- |
-| `logo`    | Header Desktop/Mobile | Always                | Add your custom logo HTML/Components     |
-| `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) |
+## Slots
-### Example with Slots
+| Slot name | Visible on       | Description                                                |
+| --------- | ---------------- | ---------------------------------------------------------- |
+| `logo`    | Header           | Render your logo exactly as you need (native HTML/widgets) |
+| `actions` | Desktop + mobile | Add buttons, links, or utility widgets                     |
 ```astro
----
-import Header from '@sofidevo/astro-dynamic-header/Header';
-const navigation = {
-  menuItems: [{ link: '/about', text: 'About' }]
-};
----
-<Header navigation={navigation}>
+<Header navigation={{ menuItems }}>
+  <a slot="logo" href="/" class="logo-link">
+    <img src="/logo.svg" alt="Branding" width="40" />
+    <span>MyBrand</span>
+  </a>
   <div slot="actions">
-    <button class="login-btn">Login</button>
+    <a href="/login" class="btn">Log in</a>
   </div>
 </Header>
 ```
-## Comprehensive Example
-Below is a complete implementation example showcasing custom logo configuration, navigation with a home URL, and theme overrides.
-```astro
----
-import Header from '@sofidevo/astro-dynamic-header/Header';
-const menuItems = [
-  {
-    link: "#",
-    text: "Services",
-    submenu: [
-      { link: "/design", text: "Design" },
-      { link: "/consulting", text: "Consulting" },
-      {
-        link: "#",
-        text: "Web Development",
-        submenu: [
-          { link: "/web/frontend", text: "Frontend" },
-          { link: "/web/backend", text: "Backend" },
-          { link: "/web/fullstack", text: "Full Stack" },
-        ],
-      },
-    ],
-  },
-  { link: "/about", text: "About" },
-  { link: "/contact", text: "Contact" },
-];
-];
 ---
-<style is:inline>
-  :root {
-    /* Pure CSS Theming Configuration */
-    --l-accent: #ff0000;
-    --l-bg: rgba(255, 255, 255, 0.8);
-    --d-accent: #00ffff;
-    --d-bg: rgba(20, 20, 20, 0.9);
-  }
-</style>
+## Customization & Theme Config
-<Header
-  headerType="floating"
-  preset="dark"
-  navigation={{
-    homeUrl: "/",
-    menuItems: menuItems,
-    header__menu__class: "flex gap-6",
-    menu__link__class: "font-medium",
-  }}
-  classNames={{
-    header: "shadow-xl",
-    mobileNav: "backdrop-blur-md",
-  }}
->
-  <a slot="logo" href="/" style="display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;">
-    <img src="https://sofidev.blog/img/branding/logo.webp" alt="My Site Logo" width="44" />
-    <span style="font-weight: bold; font-size: 1.2rem;">SofiDev</span>
-  </a>
-  <button slot="actions">Login</button>
-</Header>
-```
-## Header Types
+You can fully customize the color scheme using **CSS Custom Properties** (recommended) or the `theme` prop.
-### Floating Header
+### Option 1: Native CSS Variables (Recommended)
-- Centered with max-width constraint
-- Rounded corners
-- Padding around container
-- Perfect for modern, card-like designs
+Set CSS variables globally in your `:root` style block:
-### Fullscreen Header
+```css
+:root {
+  /* Light theme overrides */
+  --l-accent: #7c3aed;
+  --l-bg: rgba(255, 255, 255, 0.85);
+  --l-bg-opaque: #ffffff;
+  --l-text: #1a1a1a;
+  --l-blur: blur(20px);
+  /* Dark theme overrides */
+  --d-accent: #a78bfa;
+  --d-bg: rgba(10, 10, 10, 0.85);
+  --d-bg-opaque: #0a0a0a;
+  --d-text: #f5f5f5;
+  --d-blur: blur(20px);
+  /* Hamburger lines override */
+  --color-hamburger-lines: #7c3aed;
+}
+```
-- Full viewport width
-- No border radius
-- Edge-to-edge design
-- Ideal for traditional website layouts
+### Option 2: JS Theme Prop
-## Styling and Customization
+```astro
+---
+import { defaultThemes } from '@sofidevo/astro-dynamic-header';
-The component uses CSS custom properties that you can override:
+const theme = {
+  light: {
+    ...defaultThemes.light,
+    accentColor: "#7c3aed",
+    backgroundColor: "rgba(255, 255, 255, 0.85)",
+  },
+  dark: {
+    ...defaultThemes.dark,
+    accentColor: "#a78bfa",
+  }
+};
+---
-```css
-:root {
-  --light-spot-color: #00ffff;
-  --color-tertiary: #ffffff;
-  --color-hamburger-lines: #ffffff;
-}
+<Header theme={theme} />
 ```
-## TypeScript Support
+> [!IMPORTANT]
+> When using transparent backgrounds, always supply a solid fallback in `backgroundColorOpaque`. Submenus and mobile panels utilize this solid color to prevent visual glitches with nested blur effects.
-The package provides full TypeScript support. You can import types to ensure your configuration is correct:
+---
+## TypeScript
 ```astro
 ---
 import Header from '@sofidevo/astro-dynamic-header/Header';
-import { defaultThemes } from '@sofidevo/astro-dynamic-header';
 import type {
+  MenuItem,
   NavConfig,
-  DualThemeConfig,
   HeaderClassNames,
-  MenuItem,
-  SecondaryMenuItem
+  HeaderProps,
 } from '@sofidevo/astro-dynamic-header';
-const navigation: NavConfig = {
-  menuItems: [
-    {
-      link: '/products',
-      text: 'Products',
-      submenu: [
-        { link: '/software', text: 'Software' },
-        { link: '/hardware', text: 'Hardware' }
-      ]
-    }
-  ],
-  header__menu__class: "flex gap-6",
-};
+const menuItems: MenuItem[] = [
+  { link: '/about', text: 'About' }
+];
-// Prefer CSS custom properties globally rather than passing the `theme` object.
-// But you can still use the theme prop if needed:
-const theme: DualThemeConfig = {
-  light: { ...defaultThemes.light, accentColor: "#3e1c71" },
-  dark:  { ...defaultThemes.dark,  accentColor: "#00ffff", backgroundColor: "rgba(10, 10, 10, 0.9)" },
+const navigation: NavConfig = {
+  menuItems,
+  homeUrl: "/",
+  header__menu__class: "flex gap-4"
 };
 const classNames: HeaderClassNames = {
-  header: "shadow-xl",
-  mobileNav: "backdrop-blur-md",
+  header: "shadow-lg"
 };
 ---
 <Header
   navigation={navigation}
   classNames={classNames}
-  preset="auto"
 />
 ```
-### Available Types
-| Type                | Description                                     |
-| ------------------- | ----------------------------------------------- |
-| `MenuItem`          | Top-level menu item with optional properties    |
-| `SecondaryMenuItem` | Second-level menu item                          |
-| `TertiaryMenuItem`  | Third-level menu item                           |
-| `NavConfig`         | Navigation config (items + nested class props)  |
-| `ThemeConfig`       | Individual theme settings (colors, blur, etc.)  |
-| `DualThemeConfig`   | Combined settings for light and dark modes      |
-| `HeaderClassNames`  | Class overrides for structural wrapper elements |
-| `CustomClassNames`  | **Deprecated alias** for `HeaderClassNames`     |
-| `HeaderProps`       | Main props for the Header component             |
-## Browser Support
-- All modern browsers (Chrome, Firefox, Safari, Edge)
-- Mobile responsive design with optimized touch targets
-- Supports CSS `backdrop-filter` for glassmorphism
-- Automatic theme switching based on OS or site preference via `.dark` class
-## Troubleshooting
-### Import Issues
-If you encounter import errors, try these solutions:
-1. **Use direct subpath import:**
-   ```astro
-   import Header from '@sofidevo/astro-dynamic-header/Header';
-   ```
-2. **Check relative imports in TS:**
-   In some environments (like `node16`), you might need to use the `.js` extension even for TypeScript files when importing from the package internals, though the main entry point handles this for you.
-3. **Verify TypeScript configuration:**
-   ```json
-   // tsconfig.json
-   {
-     "compilerOptions": {
-       "moduleResolution": "bundler",
-       "allowImportingTsExtensions": true
-     }
-   }
-   ```
-### Compatibility
-- Astro 4.x and 5.x
-- SSG Projects (Static Site Generation)
-- SSR Projects (Server-Side Rendering)
-- Hybrid Projects (output: 'hybrid')
-## Live Examples
-Visit our demo website to see the component in action with interactive examples and complete documentation.
-## License
-MIT License - see the [LICENSE](./LICENSE) file for details.
-## Support
-If you find this package helpful, please consider giving it a star on GitHub!
 ---
-## Changelog
-### v2.2 — Performance & DX Optimization
-#### Breaking changes
-- **Removed `logo` Object Configuration prop**: The `logo` property and `LogoConfig` interface have been removed. You should now use `<slot name="logo" />` to render your logo exactly as you need, passing native HTML or Astro components.
-- **Removed `color` prop from `HamburgerButton`**: The `HamburgerButton` now inherits `--text-color` natively via CSS, which fixes a bug where the button would not properly update its color when switching to dark mode. Any direct uses of `<HamburgerButton color="..." />` will fail to compile in TypeScript and should be updated to rely on global CSS variables or context inheritance.
-#### New features and enhancements
+## Troubleshooting & FAQ
-- **Native CSS Variable Theming (Better DX)**: Redesigned how default styles are injected into the DOM. `Header.astro` no longer injects all default properties into `style={...}` attributes on load, solving the "DOM bloat" issue. You can now deeply customize the component purely by setting CSS variables like `--l-bg`, `--d-bg`, `--l-accent`, and `--d-accent` inside your `:root` style tag, removing the necessity to parse massive `theme` JS objects.
-- **Dead Code Elimination**: Cleaned up repetitive prop destructuring inside `MobileNav.astro`.
+### Import issues
-### v2.1 — Style & Customization Refactor
+Import using the direct subpath:
-#### New features
-- **`HeaderClassNames`** replaces `CustomClassNames` (alias kept — no migration required).
-  New `mobileNav` slot targets the mobile slide-in `<nav>` panel.
+```astro
+import Header from '@sofidevo/astro-dynamic-header/Header';
+```
-- **Nested class props** on `LogoConfig`:
-  | Prop | Targets |
-  |------|---------|
-  | `logo__container__class` | Logo `<a>` wrapper |
-  | `logo__text__class` | Logo text `<span>` |
+Other components are exported similarly:
-- **Nested class props** on `NavConfig`:
-  | Prop | Targets |
-  |------|---------|
-  | `header__menu__class` | Desktop `<nav>` element |
-  | `header__item__class` | Each top-level `<li>` |
-  | `menu__link__class` | Each top-level `<a>` |
+```astro
+import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu';
+import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav';
+import ChevronIcon from '@sofidevo/astro-dynamic-header/ChevronIcon';
+```
-- **`defaultThemes` exported** — import and spread the built-in tokens to extend them:
-  ```ts
-  import { defaultThemes } from "@sofidevo/astro-dynamic-header";
-  const theme = { dark: { ...defaultThemes.dark, accentColor: "#f43f5e" } };
-  ```
+### Acordion icons not showing up
-#### Internal improvements
+Icons are rendered as inline SVG components. If you are upgrading from `v1.x` or `v2.0` and have the old ChevronIcon CDN `<script>` tag in your layout `<head>`, you can safely remove it.
-- Default theme tokens extracted to `src/defaults.ts` — easier to read and maintain.
-- `HamburgerButton` color is now explicitly wired from the resolved theme (no visual change).
+---
-#### Deprecations
+## Compatibility
-- `CustomClassNames` — use `HeaderClassNames` instead. The alias will remain until the next major version.
+- **Astro 7.x**
+- SSG, SSR, and Hybrid project outputs.
-### v2.0 — Object-based Configuration API
+---
-> [!WARNING]
-> Breaking change: `logo` changed from `string` to `LogoConfig`, `navigation` changed from `MenuItem[]` to `NavConfig`.
+## License
-- `logo` prop restructured to `LogoConfig` object (`src`, `alt`, `width`, `text`, `textSize`, `textColor`).
-- `navigation` prop restructured to `NavConfig` object (`homeUrl`, `menuItems`).
-- `classNames` prop introduced for CSS class injection (`CustomClassNames`).
-- Dual-theme support via `DualThemeConfig` (`light` + `dark`).
+MIT License.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -14,10 +14,13 @@
     "./NavMenu": "./src/NavMenu.astro",
     "./MobileNav": "./src/MobileNav.astro",
     "./HamburgerButton": "./src/HamburgerButton.astro",
+    "./ChevronIcon": "./src/ChevronIcon.astro",
+    "./defaults": "./src/defaults.ts",
     "./Header.astro": "./src/Header.astro",
     "./NavMenu.astro": "./src/NavMenu.astro",
     "./MobileNav.astro": "./src/MobileNav.astro",
-    "./HamburgerButton.astro": "./src/HamburgerButton.astro"
+    "./HamburgerButton.astro": "./src/HamburgerButton.astro",
+    "./ChevronIcon.astro": "./src/ChevronIcon.astro"
   },
   "files": [
     "src/*.ts",
@@ -50,13 +53,13 @@
   "author": "SofiDev contact@sofidev.top",
   "license": "MIT",
   "peerDependencies": {
-    "astro": "^6.0.6"
+    "astro": "^7.0.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
     "@types/jsdom": "^21.1.7",
     "@vitest/coverage-v8": "^3.2.4",
-    "astro": "^6.3.7",
+    "astro": "^7.0.4",
     "jsdom": "^26.1.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"

package/src/ChevronIcon.astro ADDED Viewed

@@ -0,0 +1,25 @@
+---
+const { class: className, ...rest } = Astro.props;
+const viewBox = "0 0 24 24";
+const content = `<path class="hlhawq"/>`;
+---
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  class={className}
+  viewBox={viewBox}
+  {...rest}
+  set:html={content}
+/>
+<style is:inline>
+  .hlhawq {
+    fill: currentColor;
+    d: path(
+      "M11.646 15.146L5.854 9.354a.5.5 0 0 1 .353-.854h11.586a.5.5 0 0 1 .353.854l-5.793 5.792a.5.5 0 0 1-.707 0"
+    );
+  }
+</style>

package/src/Header.astro CHANGED Viewed

@@ -155,6 +155,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
     <div class:list={["nav-menu-wrapper", classNames.nav]}>
       <NavMenu
         menuItems={menuItems}
+        homeUrl={homeUrl}
         header__menu__class={header__menu__class}
         header__item__class={header__item__class}
         menu__link__class={menu__link__class}
@@ -173,6 +174,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
     <MobileNav
       menuItems={menuItems}
+      homeUrl={homeUrl}
       type={headerType}
       mobileNav__class={classNames.mobileNav}
     >

package/src/MobileNav.astro CHANGED Viewed

@@ -1,5 +1,6 @@
 ---
 import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
+import ChevronIcon from "./ChevronIcon.astro";
 export interface Props {
   /** Header type for styling: "floating" or "fullscreen" */
@@ -10,6 +11,8 @@ export interface Props {
   showHomeLink?: boolean;
   /** Text for the home link (defaults to "Home") */
   homeText?: string;
+  /** The destination URL for the home link. @default "/" */
+  homeUrl?: string;
   /** Extra CSS class(es) for the root mobile `<nav>` panel. */
   mobileNav__class?: string;
 }
@@ -19,7 +22,8 @@ const {
   mobileNav__class,
   menuItems = [],
   showHomeLink = true,
-  homeText = "Home"
+  homeText = "Home",
+  homeUrl = "/",
 } = Astro.props;
 const pagePathname = Astro.url.pathname;
@@ -34,11 +38,11 @@ const pagePathname = Astro.url.pathname;
 >
   <ol class="mobile-menu">
     {
-      showHomeLink && pagePathname !== "/" && (
+      showHomeLink && pagePathname !== homeUrl && (
         <li class="header__item mobile-header__item">
           <a
             class="menu__link mobile-menu__link"
-            href="/"
+            href={homeUrl}
             data-astro-prefetch="hover"
           >
             {homeText}
@@ -58,13 +62,7 @@ const pagePathname = Astro.url.pathname;
               >
                 <summary class:list={["menu__summary", { active: isActive }]}>
                   {item.text}
-                  <iconify-icon
-                    class="iconify-arrow"
-                    icon="codicon:triangle-down"
-                    width="15"
-                    height="15"
-                    style="color: var(--accent-color);"
-                  />
+                  <ChevronIcon class="iconify-arrow" width={15} height={15} />
                 </summary>
                 <ol class="mobile-submenu">
                   {item?.submenu?.map((sub: SecondaryMenuItem) => {
@@ -85,12 +83,10 @@ const pagePathname = Astro.url.pathname;
                               ]}
                             >
                               {sub.text}
-                              <iconify-icon
+                              <ChevronIcon
                                 class="iconify-arrow"
-                                icon="codicon:triangle-down"
-                                width="15"
-                                height="15"
-                                style="color: var(--accent-color);"
+                                width={15}
+                                height={15}
                               />
                             </summary>
                             <ol class="mobile-subsubmenu">
@@ -240,7 +236,7 @@ const pagePathname = Astro.url.pathname;
     overflow: clip;
   }
-  .mobile-details:open iconify-icon {
+  .mobile-details:open svg.iconify-arrow {
     transform: rotate(180deg);
   }

package/src/MoonIcon.astro ADDED Viewed

@@ -0,0 +1,106 @@
+---
+const props = Astro.props;
+const regex = /\sid="(\S+)"/g;
+const counters = new Map<string, number>();
+function nextID(id: string) {
+  id = id.replace(/[0-9]+$/, "") || "a";
+  const count = counters.get(id) || 0;
+  counters.set(id, count + 1);
+  return count ? `${id}${count}` : id;
+}
+function replaceIDs(body: string) {
+  const ids: string[] = [];
+  let match;
+  while ((match = regex.exec(body))) ids.push(match[1]);
+  if (!ids.length) return body;
+  const suffix =
+    "suffix" + ((Math.random() * 16777216) | Date.now()).toString(16);
+  ids.forEach((id) => {
+    const newID = nextID(id);
+    const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    body = body.replace(
+      new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', "g"),
+      "$1" + newID + suffix + "$3",
+    );
+  });
+  body = body.replace(new RegExp(suffix, "g"), "");
+  return body;
+}
+const viewBox = "0 0 24 24";
+const content = replaceIDs(
+  `<defs><mask id="SVGnw0mAdjE"><path d="M12 2c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z" class="n1mjuz"><animate fill="freeze" attributeName="d" dur="0.4s" values="M12 6c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z;M12 2c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z"/><set fill="freeze" attributeName="opacity" begin="0.4s" to="0"/></path><path d="M18 -4c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z"><animate fill="freeze" attributeName="d" dur="0.4s" values="M22 -4c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z;M18 -4c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z"/><set fill="freeze" attributeName="opacity" begin="0.4s" to="0"/></path></mask></defs><path class="smogax"><animate fill="freeze" attributeName="opacity" dur="0.4s" values="1;0"/></path><g class="cuyn6t"><path mask="url(#SVGnw0mAdjE)" class="t_ev7s"/><path opacity="0" class="izfmla"><set fill="freeze" attributeName="opacity" begin="0.4s" to="1"/></path></g><g stroke-dashoffset="4" class="abf34n"><path class="k7_l3l"><animate attributeName="stroke-dashoffset" begin="0.4s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="hhuniw"><animate attributeName="stroke-dashoffset" begin="1.07s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="z8cgtd"><animate attributeName="stroke-dashoffset" begin="1.74s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="drcfta"><animate attributeName="stroke-dashoffset" begin="2.41s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="yij7vx"><animate attributeName="stroke-dashoffset" begin="3.08s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="emoajy"><animate attributeName="stroke-dashoffset" begin="3.75s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="f1to6s"><animate attributeName="stroke-dashoffset" begin="4.42s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="niixso"><animate attributeName="stroke-dashoffset" begin="5.09s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path><path class="z8cgtd"><animate attributeName="stroke-dashoffset" begin="5.76s" dur="6s" keyTimes="0;0.08;0.22;0.3;1" repeatCount="indefinite" values="4;0;0;4;4"/></path></g>`,
+);
+---
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="25px"
+  height="25px"
+  viewBox={viewBox}
+  {...props}
+  set:html={content}
+/>
+<style is:inline>
+  .n1mjuz {
+    fill: var(--svg-color--fff, #fff);
+  }
+  .smogax {
+    fill: none;
+    stroke: white;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--svg-stroke-width--2px, 2px);
+    d: path(
+      "M12 21v1M21 12h1M12 3v-1M3 12h-1M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"
+    );
+  }
+  .t_ev7s {
+    d: path("M0 0h24v24H0z");
+  }
+  .izfmla {
+    stroke: white;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--svg-stroke-width--2px, 2px);
+    d: path(
+      "M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"
+    );
+  }
+  .abf34n {
+    fill: none;
+    stroke: white;
+    stroke-dasharray: 4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .k7_l3l {
+    d: path("M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5");
+  }
+  .hhuniw {
+    d: path("M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5");
+  }
+  .z8cgtd {
+    d: path("M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5");
+  }
+  .drcfta {
+    d: path("M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5");
+  }
+  .yij7vx {
+    d: path("M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5");
+  }
+  .emoajy {
+    d: path("M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5");
+  }
+  .f1to6s {
+    d: path("M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5");
+  }
+  .niixso {
+    d: path("M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5");
+  }
+</style>

package/src/NavMenu.astro CHANGED Viewed

@@ -1,5 +1,6 @@
 ---
 import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
+import ChevronIcon from "./ChevronIcon.astro";
 export interface Props {
   /**
@@ -19,6 +20,11 @@ export interface Props {
    * @default "Home"
    */
   homeText?: string;
+  /**
+   * The destination URL for the home link.
+   * @default "/"
+   */
+  homeUrl?: string;
   /** Extra CSS class(es) for the `<nav>` element. */
   header__menu__class?: string;
   /** Extra CSS class(es) for each top-level `<li>` item. */
@@ -31,6 +37,7 @@ const {
   menuItems = [],
   showHomeLink = true,
   homeText = "Home",
+  homeUrl = "/",
   header__menu__class,
   header__item__class,
   menu__link__class,
@@ -144,11 +151,11 @@ const pagePathname = Astro.url.pathname;
 <nav class:list={["header__menu", header__menu__class]} id="header-menu">
   <ul class="menu">
     {
-      showHomeLink && pagePathname !== "/" && (
+      showHomeLink && pagePathname !== homeUrl && (
         <li class:list={["header__item", header__item__class]}>
           <a
             class:list={["menu__link", menu__link__class]}
-            href="/"
+            href={homeUrl}
             data-astro-prefetch="hover"
           >
             {homeText}
@@ -162,12 +169,7 @@ const pagePathname = Astro.url.pathname;
           <a class:list={["menu__link", menu__link__class]} href={item.link}>
             {item.text}
             {item.submenu && (
-              <iconify-icon
-                class="iconify-arrow"
-                icon="codicon:triangle-down"
-                width="15"
-                height="15"
-              />
+              <ChevronIcon class="arrow-down" width={15} height={15} />
             )}
           </a>
           {item.submenu && (
@@ -177,11 +179,10 @@ const pagePathname = Astro.url.pathname;
                   <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"
+                      <ChevronIcon
+                        class="ChevronIcon-arrow"
+                        width={15}
+                        height={15}
                       />
                     )}
                   </a>
@@ -255,11 +256,11 @@ const pagePathname = Astro.url.pathname;
     }
   }
-  .iconify-arrow {
+  .ChevronIcon-arrow {
     transition: transform 0.3s linear;
   }
-  .menu__link:hover > .iconify-arrow {
+  .menu__link:hover > .ChevronIcon-arrow {
     transform: rotate(180deg);
   }
@@ -325,11 +326,12 @@ const pagePathname = Astro.url.pathname;
   .submenu::after {
     content: "";
     position: absolute;
-    top: -4em;
+    top: -1.1em;
     width: 100%;
     z-index: -3;
     pointer-events: none;
-    height: 10em;
+    height: 7em;
+    right: 0;
   }
   .subsubmenu {

package/src/SunIcon.astro ADDED Viewed

@@ -0,0 +1,34 @@
+---
+const props = Astro.props;
+const viewBox = "0 0 24 24";
+const content = `<g class="gutruu"><path fill-opacity="0" class="xkoryc"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="34;0"/><animate fill="freeze" attributeName="fill-opacity" begin="0.5s" dur="0.4s" to="1"/></path><g class="ft5dvn"><path d="M12 21v1M21 12h1M12 3v-1M3 12h-1" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="1s" to="1"/><animate fill="freeze" attributeName="d" begin="1s" dur="0.2s" values="M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"/></path><path d="M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="1.2s" to="1"/><animate fill="freeze" attributeName="d" begin="1.2s" dur="0.2s" values="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"/></path></g></g>`;
+---
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="25px"
+  height="25px"
+  viewBox={viewBox}
+  {...props}
+  set:html={content}
+/>
+<style is:inline>
+  .gutruu {
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--svg-stroke-width--2px, 2px);
+  }
+  .xkoryc {
+    fill: currentColor;
+    stroke-dasharray: 34;
+    d: path(
+      "M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z"
+    );
+  }
+  .ft5dvn {
+    fill: none;
+  }
+</style>

package/src/index.ts CHANGED Viewed

@@ -192,18 +192,25 @@ export interface HeaderProps {
 }
 export interface NavMenuProps {
-  menuItems?: MenuItemType[];
+  type?: "floating" | "fullscreen";
+  menuItems?: MenuItem[];
   showHomeLink?: boolean;
   homeText?: string;
+  header__menu__class?: string;
+  header__item__class?: string;
+  menu__link__class?: string;
 }
 export interface MobileNavProps {
-  menuItems?: MenuItemType[];
+  type?: "floating" | "fullscreen";
+  menuItems?: MenuItem[];
   showHomeLink?: boolean;
   homeText?: string;
+  mobileNav__class?: string;
   accentColor?: string;
 }
 export interface HamburgerButtonProps {
   color?: string;
 }