@sofidevo/astro-dynamic-header 2.0.2 → 3.1.0

package/src/NavMenu.astro

@@ -1,5 +1,6 @@
 ---
 import type { MenuItem, SecondaryMenuItem, TertiaryMenuItem } from "./index.js";
+import ChevronIcon from "./ChevronIcon.astro";
 
 export interface Props {
   /**
@@ -18,11 +19,29 @@ export interface Props {
    * Text for the home link.
    * @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. */
+  header__item__class?: string;
+  /** Extra CSS class(es) for each top-level menu `<a>` link. */
+  menu__link__class?: string;
 }
 
-const { menuItems = [], showHomeLink = true, homeText = "Home" } = Astro.props;
+const {
+  menuItems = [],
+  showHomeLink = true,
+  homeText = "Home",
+  homeUrl = "/",
+  header__menu__class,
+  header__item__class,
+  menu__link__class,
+} = Astro.props;
 
 const pagePathname = Astro.url.pathname;
 ---
@@ -129,12 +148,16 @@ const pagePathname = Astro.url.pathname;
   });
 </script>
 
-<nav class="header__menu" id="header-menu">
+<nav class:list={["header__menu", header__menu__class]} id="header-menu">
   <ul class="menu">
     {
-      showHomeLink && pagePathname !== "/" && (
-        <li class="header__item">
-          <a class="menu__link" href="/" data-astro-prefetch="hover">
+      showHomeLink && pagePathname !== homeUrl && (
+        <li class:list={["header__item", header__item__class]}>
+          <a
+            class:list={["menu__link", menu__link__class]}
+            href={homeUrl}
+            data-astro-prefetch="hover"
+          >
             {homeText}
           </a>
         </li>
@@ -142,16 +165,11 @@ const pagePathname = Astro.url.pathname;
     }
     {
       menuItems.map((item: MenuItem) => (
-        <li class="menu__item">
-          <a class="menu__link" href={item.link}>
+        <li class:list={["menu__item", header__item__class]}>
+          <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 && (
@@ -161,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>
@@ -239,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);
   }
 
@@ -309,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

@@ -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/defaults.ts

@@ -0,0 +1,36 @@
+import type { DualThemeConfig } from "./index.js";
+
+/**
+ * Built-in default theme tokens used by the Header component.
+ * These are merged with any user-supplied `theme` overrides.
+ *
+ * You can import this object if you want to build on top of the defaults
+ * rather than replacing them wholesale:
+ *
+ * @example
+ * ```ts
+ * import { defaultThemes } from '@sofidevo/astro-dynamic-header/defaults';
+ * const theme = {
+ *   light: { ...defaultThemes.light, accentColor: "#e11d48" },
+ *   dark:  { ...defaultThemes.dark,  accentColor: "#f43f5e" },
+ * };
+ * ```
+ */
+export const defaultThemes: Required<DualThemeConfig> = {
+  light: {
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    backgroundColorOpaque: "rgb(255, 255, 255)",
+    backdropBlur: "blur(20px)",
+    zIndex: 10,
+    textColor: "#1a1a1a",
+    accentColor: "#3e1c71",
+  },
+  dark: {
+    backgroundColor: "#0d0d0dcc",
+    backgroundColorOpaque: "#0d0d0d",
+    backdropBlur: "blur(20px)",
+    zIndex: 10,
+    textColor: "#ffffff",
+    accentColor: "#00ffff",
+  },
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-
+export { defaultThemes } from "./defaults.js";
 
 /**
  * Represents a menu item in the navigation.
@@ -46,87 +46,70 @@ export interface MenuItem {
   submenu?: SecondaryMenuItem[];
 }
 
-/**
- * Configuration for the site logo.
- */
-export interface LogoConfig {
-  /** 
-   * The URL of the logo image.
-   * @example "/assets/logo.png"
-   * @default "/logo.png"
-   */
-  src?: string;
-  /** Alternative text for the logo image */
-  alt?: string;
-  /** 
-   * CSS width for the logo.
-   * @example "150px" or "4rem"
-   * @default "55px"
-   */
-  width?: string;
-  /** 
-   * Optional text to display next to the logo image.
-   * @example "My Awesome Site"
-   */
-  text?: string;
-  /** 
-   * CSS font-size for the logo text.
-   * @default "1em"
-   */
-  textSize?: string;
-  /** 
-   * CSS color for the logo text. 
-   * If not provided, it will inherit from the theme's text color.
-   * @default "inherit"
-   */
-  textColor?: string;
-}
-
 /**
  * Configuration for the main navigation.
  */
 export interface NavConfig {
-  /** 
+  /**
    * The URL for the home link.
    * @default "/"
    */
   homeUrl?: string;
-  /** 
+  /**
    * Array of top-level menu items.
    * @example [{ link: "/about", text: "About Us" }]
    */
   menuItems?: MenuItem[];
+  /**
+   * Fine-grained class override for the desktop `<nav>` element.
+   * Use this when you want the class to live alongside the rest of the
+   * navigation configuration rather than in the top-level `classNames` prop.
+   * @example "flex gap-4"
+   */
+  header__menu__class?: string;
+  /**
+   * Fine-grained class override applied to every top-level `<li>` item
+   * in the desktop navigation.
+   * @example "px-2 py-1"
+   */
+  header__item__class?: string;
+  /**
+   * Fine-grained class override applied to every top-level `<a>` link
+   * in the desktop navigation.
+   * @example "hover:underline font-medium"
+   */
+  menu__link__class?: string;
 }
 
 /**
  * Individual theme settings for a specific state (light/dark).
  */
 export interface ThemeConfig {
-  /** 
+  /**
    * Main background color. Supports hex, rgb, rgba, etc.
    * @example "rgba(255, 255, 255, 0.9)"
    */
   backgroundColor?: string;
-  /** 
+  /**
    * Solid background color for submenus and mobile panels to ensure readability.
    * @example "#ffffff"
    */
   backgroundColorOpaque?: string;
-  /** 
+  /**
    * CSS backdrop-filter blur value.
    * @default "blur(20px)"
    */
   backdropBlur?: string;
-  /** 
+  /**
    * CSS z-index for the header container.
    * @default 10
    */
   zIndex?: number;
-  /** 
+  /**
    * Primary text color for navigation and logo.
    */
   textColor?: string;
-  /** 
+  /**
    * Color for highlights, active states, underscores, and small borders.
    */
   accentColor?: string;
@@ -143,33 +126,50 @@ export interface DualThemeConfig {
 }
 
 /**
- * Custom CSS class names for deep customization.
+ * Custom CSS class names for high-level layout & appearance customization.
+ *
+ * These target the structural wrapper elements of the Header. For fine-grained
+ * control over individual nav links or the logo internals, use the nested
+ * `xxx__class` props inside the `navigation` or `logo` config objects instead.
+ *
+ * @example
+ * ```astro
+ * <Header classNames={{ header: "shadow-xl", container: "top-4 px-6" }} />
+ * ```
  */
-export interface CustomClassNames {
-  /** Class for the outermost fixed container */
+export interface HeaderClassNames {
+  /** Outermost fixed `<div>` that positions the header on the page. */
   container?: string;
-  /** Class for the main header element */
+  /** Inner `<header>` element — best place for shadows, borders, transitions. */
   header?: string;
-  /** Class for the logo anchor tag */
+  /** Logo anchor `<a>` — add hover states or focus rings here. */
   logo?: string;
-  /** Class for the logo span text */
+  /** Logo text `<span>` — override typography here. */
   logoText?: string;
-  /** Class for the desktop navigation wrapper */
+  /** Desktop nav wrapper `<div>` — adjust spacing between logo and menu. */
   nav?: string;
+  /** Mobile nav panel `<nav>` — add slide-in overrides or z-index tweaks. */
+  mobileNav?: string;
 }
 
+/**
+ * @deprecated Use {@link HeaderClassNames} instead.
+ * Kept as an alias for backwards compatibility.
+ */
+export type CustomClassNames = HeaderClassNames;
+
 /**
  * Main properties for the Header component.
  */
 export interface HeaderProps {
-  /** 
+  /**
    * Layout style.
    * - "floating": Centered with max-width and rounded corners.
    * - "fullscreen": Full width with no border radius.
    * @default "floating"
    */
   headerType?: "floating" | "fullscreen";
-  /** 
+  /**
    * Theme behavior.
    * - "light": Force light mode.
    * - "dark": Force dark mode.
@@ -177,32 +177,40 @@ export interface HeaderProps {
    * @default "auto"
    */
   preset?: "light" | "dark" | "auto";
-  /** Logo configuration object. */
-  logo?: LogoConfig;
+
   /** Navigation links and structure. */
   navigation?: NavConfig;
-  /** Custom theme overrides. See @interface DualThemeConfig */
+  /** Custom theme overrides. See {@link DualThemeConfig} */
   theme?: DualThemeConfig;
-  /** 
-   * Custom CSS classes for injecting utility classes (e.g., Tailwind).
-   * @example { header: "shadow-lg", logoText: "font-bold" }
+  /**
+   * High-level CSS class overrides for structural wrapper elements.
+   * For fine-grained nav/logo element classes, use the nested `xxx__class`
+   * props inside `navigation` or `logo` instead.
+   * @example { header: "shadow-lg", container: "top-4" }
    */
-  classNames?: CustomClassNames;
+  classNames?: HeaderClassNames;
 }
 
 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;
 }
+