@otl-core/next-navigation 1.1.18 → 1.1.20

package/dist/components/navigation/dropdown.js

@@ -0,0 +1,258 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getBreakpointValue } from "@otl-core/cms-utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import { useNavigation } from "../../context/navigation-context";
+import { resolveBorderToCSS, resolveColorsToCSS } from "@otl-core/style-utils";
+import { DropdownContentItem } from "../items/dropdown-content-item";
+function getDropdownTimeout(isMobileMenu) {
+  return isMobileMenu ? 300 : 200;
+}
+function getDropdownClassNames(isMobileMenu) {
+  return isMobileMenu ? "mobile-menu" : "desktop-dropdown";
+}
+function getDropdownZIndex(isSameLayer, layer) {
+  if (isSameLayer) return void 0;
+  return layer === "above" ? 9999 : void 0;
+}
+function NavigationDropdown({
+  itemId,
+  config,
+  navigation,
+  resolvedColors,
+  dropdownId,
+  site,
+  containerContent = false,
+  isSameLayer = false
+}) {
+  const { activeDropdown } = useNavigation();
+  const [navigationStack, setNavigationStack] = useState([]);
+  const nodeRef = useRef(null);
+  const backButtonRef = useRef(null);
+  const isMobileMenu = useMemo(
+    () => itemId.startsWith("mobile-menu"),
+    [itemId]
+  );
+  const isOpen = useMemo(
+    () => activeDropdown === itemId,
+    [activeDropdown, itemId]
+  );
+  const content = useMemo(
+    () => config.content || [],
+    [config]
+  );
+  const prevIsOpen = useRef(isOpen);
+  if (prevIsOpen.current && !isOpen) {
+    setNavigationStack([]);
+  }
+  prevIsOpen.current = isOpen;
+  useEffect(() => {
+    if (navigationStack.length > 0 && backButtonRef.current) {
+      backButtonRef.current.focus();
+    }
+  }, [navigationStack.length]);
+  const handleNavigate = (contentId) => {
+    setNavigationStack((prev) => [...prev, contentId]);
+  };
+  const handleBack = () => {
+    setNavigationStack((prev) => prev.slice(0, -1));
+  };
+  const findDropdownById = (contentArray, id) => {
+    for (const item of contentArray) {
+      if (item.id === id && item.type === "dropdown") {
+        return item;
+      }
+      if (item.type === "section") {
+        const config2 = item.config;
+        const found = findDropdownById(config2.content, id);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  };
+  const buildNavigationPanels = () => {
+    const panels2 = [];
+    panels2.push({ content, depth: 0 });
+    let currentContent = content;
+    for (let i = 0; i < navigationStack.length; i++) {
+      const contentId = navigationStack[i];
+      const dropdownItem = findDropdownById(currentContent, contentId);
+      if (dropdownItem && dropdownItem.config) {
+        const nestedContent = dropdownItem.config.content;
+        panels2.push({ content: nestedContent, depth: i + 1 });
+        currentContent = nestedContent;
+      } else {
+        break;
+      }
+    }
+    return panels2;
+  };
+  const panels = buildNavigationPanels();
+  const dropdownColors = resolveColorsToCSS({
+    dropdownMenuBackground: navigation.style?.dropdown?.background,
+    dropdownMenuLinkColor: navigation.style?.dropdown?.link?.color,
+    dropdownMenuLinkHoverColor: navigation.style?.dropdown?.link?.hoverColor,
+    dropdownMenuLinkHoverBackground: navigation.style?.dropdown?.link?.hoverBackground,
+    dropdownMenuTextColor: navigation.style?.dropdown?.textColor
+  });
+  const dropdownMenuBackground = dropdownColors.dropdownMenuBackground;
+  const dropdownMenuLinkColor = dropdownColors.dropdownMenuLinkColor;
+  const dropdownMenuLinkHoverColor = dropdownColors.dropdownMenuLinkHoverColor;
+  const dropdownMenuLinkHoverBackground = dropdownColors.dropdownMenuLinkHoverBackground || "transparent";
+  const dropdownMenuTextColor = dropdownColors.dropdownMenuTextColor;
+  const dropdownMenuBorder = useMemo(() => {
+    if (!navigation.style?.dropdown?.border) return void 0;
+    return resolveBorderToCSS(navigation.style.dropdown.border);
+  }, [navigation.style?.dropdown?.border]);
+  if (content.length === 0) return null;
+  const dropdownResolvedColors = {
+    ...resolvedColors,
+    text: dropdownMenuTextColor || resolvedColors.text,
+    dropdownMenuLinkColor
+  };
+  const useSameLayerMode = isSameLayer && !isMobileMenu;
+  const dropdownStyles = {
+    backgroundColor: useSameLayerMode ? void 0 : dropdownMenuBackground,
+    color: dropdownMenuTextColor || dropdownMenuLinkColor,
+    ...useSameLayerMode ? {} : dropdownMenuBorder
+  };
+  const linkHoverStyle = {
+    "--dropdown-link-hover-color": dropdownMenuLinkHoverColor,
+    "--dropdown-link-hover-background": dropdownMenuLinkHoverBackground
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    CSSTransition,
+    {
+      in: isOpen,
+      nodeRef,
+      timeout: useSameLayerMode ? 250 : getDropdownTimeout(isMobileMenu),
+      classNames: useSameLayerMode ? "same-layer-dropdown" : getDropdownClassNames(isMobileMenu),
+      unmountOnExit: !useSameLayerMode,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: nodeRef,
+          className: `relative w-full navigation-dropdown-${dropdownId}`,
+          style: {
+            ...dropdownStyles,
+            ...useSameLayerMode ? { display: "grid", overflow: "hidden" } : { overflow: "hidden" },
+            zIndex: getDropdownZIndex(
+              useSameLayerMode,
+              navigation.style?.dropdown?.layer
+            ),
+            marginTop: navigation.style?.dropdown?.offset?.y ? getBreakpointValue(navigation.style.dropdown.offset.y, "base") : "0",
+            marginLeft: navigation.style?.dropdown?.offset?.left ? getBreakpointValue(
+              navigation.style.dropdown.offset.left,
+              "base"
+            ) : "0",
+            marginRight: navigation.style?.dropdown?.offset?.right ? getBreakpointValue(
+              navigation.style.dropdown.offset.right,
+              "base"
+            ) : "0"
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: useSameLayerMode ? { overflow: "hidden", minHeight: 0 } : void 0,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    transform: `translateX(-${navigationStack.length * 100}%)`,
+                    transition: "transform 300ms ease-in-out"
+                  },
+                  children: panels.map((panel, panelIndex) => {
+                    const isActive = panelIndex === navigationStack.length;
+                    const isToRight = panelIndex > navigationStack.length;
+                    const panelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+                      panel.depth > 0 && /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          ref: panelIndex === navigationStack.length ? backButtonRef : null,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            handleBack();
+                          },
+                          type: "button",
+                          "data-navigation-internal": "true",
+                          className: "flex items-center px-3 py-2 text-sm rounded-md transition-colors mb-2",
+                          style: {
+                            color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                className: "mr-2",
+                                children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+                              }
+                            ),
+                            "Back"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: panel.content?.map((item) => {
+                        if (item.type === "section") {
+                          return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-[200px]", children: /* @__PURE__ */ jsx(
+                            DropdownContentItem,
+                            {
+                              content: item,
+                              resolvedColors: dropdownResolvedColors,
+                              onNavigate: handleNavigate,
+                              navigation,
+                              site
+                            }
+                          ) }, item.id);
+                        }
+                        return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+                          DropdownContentItem,
+                          {
+                            content: item,
+                            resolvedColors: dropdownResolvedColors,
+                            onNavigate: handleNavigate,
+                            navigation,
+                            site
+                          }
+                        ) }, item.id);
+                      }) })
+                    ] });
+                    return /* @__PURE__ */ jsx(
+                      "nav",
+                      {
+                        className: `flex flex-col p-2 dropdown-content-${dropdownId}`,
+                        style: {
+                          ...linkHoverStyle,
+                          width: "100%",
+                          flexShrink: 0,
+                          transform: isToRight ? "translateX(30px)" : "translateX(0)",
+                          opacity: isActive ? 1 : 0.95,
+                          transition: "transform 300ms ease-in-out, opacity 300ms ease-in-out"
+                        },
+                        inert: !isActive ? true : void 0,
+                        children: containerContent ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: panelContent }) : panelContent
+                      },
+                      panelIndex
+                    );
+                  })
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  NavigationDropdown
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/navigation/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  Site,\n  HeaderConfig,\n  HeaderDropdownGroupConfig,\n  HeaderNavigationItemConfig,\n  HeaderNavigationItemDropdownConfig,\n} from \"@otl-core/cms-types\";\nimport { HeaderDropdownContent } from \"@otl-core/cms-types\";\nimport { getBreakpointValue } from \"@otl-core/cms-utils\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { useNavigation } from \"../../context/navigation-context\";\nimport { resolveBorderToCSS, resolveColorsToCSS } from \"@otl-core/style-utils\";\nimport { DropdownContentItem } from \"../items/dropdown-content-item\";\n\nfunction getDropdownTimeout(isMobileMenu: boolean): number {\n  return isMobileMenu ? 300 : 200;\n}\n\nfunction getDropdownClassNames(isMobileMenu: boolean): string {\n  return isMobileMenu ? \"mobile-menu\" : \"desktop-dropdown\";\n}\n\nfunction getDropdownZIndex(\n  isSameLayer: boolean,\n  layer?: string,\n): number | undefined {\n  if (isSameLayer) return undefined;\n  return layer === \"above\" ? 9999 : undefined;\n}\n\ninterface NavigationDropdownProps {\n  itemId: string;\n  config: HeaderNavigationItemConfig;\n  navigation: HeaderConfig;\n  resolvedColors: Record<string, string | undefined>;\n  styles: React.CSSProperties;\n  linkStyle: React.CSSProperties;\n  dropdownId: string;\n  site: Site;\n  containerContent?: boolean;\n  isSameLayer?: boolean;\n}\nexport function NavigationDropdown({\n  itemId,\n  config,\n  navigation,\n  resolvedColors,\n  dropdownId,\n  site,\n  containerContent = false,\n  isSameLayer = false,\n}: NavigationDropdownProps) {\n  const { activeDropdown } = useNavigation();\n  const [navigationStack, setNavigationStack] = useState<string[]>([]);\n  const nodeRef = useRef(null);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n\n  const isMobileMenu = useMemo(\n    () => itemId.startsWith(\"mobile-menu\"),\n    [itemId],\n  );\n  const isOpen = useMemo(\n    () => activeDropdown === itemId,\n    [activeDropdown, itemId],\n  );\n  const content: HeaderDropdownContent[] = useMemo(\n    () => (config as HeaderNavigationItemDropdownConfig).content || [],\n    [config],\n  );\n\n  // Reset nested content when dropdown closes (derived during render, no effect needed)\n  const prevIsOpen = useRef(isOpen);\n  if (prevIsOpen.current && !isOpen) {\n    setNavigationStack([]);\n  }\n  prevIsOpen.current = isOpen;\n\n  // Focus back button when navigating to nested content (DOM side effect, needs useEffect)\n  useEffect(() => {\n    if (navigationStack.length > 0 && backButtonRef.current) {\n      backButtonRef.current.focus();\n    }\n  }, [navigationStack.length]);\n\n  const handleNavigate = (contentId: string) => {\n    setNavigationStack((prev) => [...prev, contentId]);\n  };\n\n  const handleBack = () => {\n    setNavigationStack((prev) => prev.slice(0, -1));\n  };\n\n  // Helper to recursively find a dropdown by ID in content (including inside sections)\n  const findDropdownById = (\n    contentArray: HeaderDropdownContent[],\n    id: string,\n  ): HeaderDropdownContent | undefined => {\n    for (const item of contentArray) {\n      if (item.id === id && item.type === \"dropdown\") {\n        return item;\n      }\n      // Search inside sections\n      if (item.type === \"section\") {\n        const config = item.config as HeaderDropdownGroupConfig;\n        const found = findDropdownById(config.content, id);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Build the navigation panels based on the stack\n  const buildNavigationPanels = () => {\n    const panels: Array<{\n      content: HeaderDropdownContent[];\n      depth: number;\n    }> = [];\n\n    // Root panel\n    panels.push({ content: content, depth: 0 });\n\n    // Build nested panels\n    let currentContent = content;\n    for (let i = 0; i < navigationStack.length; i++) {\n      const contentId = navigationStack[i];\n      const dropdownItem = findDropdownById(currentContent, contentId);\n\n      if (dropdownItem && dropdownItem.config) {\n        const nestedContent = (\n          dropdownItem.config as HeaderNavigationItemDropdownConfig\n        ).content;\n        panels.push({ content: nestedContent, depth: i + 1 });\n        currentContent = nestedContent;\n      } else {\n        break;\n      }\n    }\n\n    return panels;\n  };\n\n  const panels = buildNavigationPanels();\n\n  // Use the same color resolution as the rest of the system\n  const dropdownColors = resolveColorsToCSS({\n    dropdownMenuBackground: navigation.style?.dropdown?.background,\n    dropdownMenuLinkColor: navigation.style?.dropdown?.link?.color,\n    dropdownMenuLinkHoverColor: navigation.style?.dropdown?.link?.hoverColor,\n    dropdownMenuLinkHoverBackground:\n      navigation.style?.dropdown?.link?.hoverBackground,\n    dropdownMenuTextColor: navigation.style?.dropdown?.textColor,\n  });\n\n  const dropdownMenuBackground = dropdownColors.dropdownMenuBackground;\n  const dropdownMenuLinkColor = dropdownColors.dropdownMenuLinkColor;\n  const dropdownMenuLinkHoverColor = dropdownColors.dropdownMenuLinkHoverColor;\n  const dropdownMenuLinkHoverBackground =\n    dropdownColors.dropdownMenuLinkHoverBackground || \"transparent\";\n  const dropdownMenuTextColor = dropdownColors.dropdownMenuTextColor;\n\n  const dropdownMenuBorder = useMemo(() => {\n    if (!navigation.style?.dropdown?.border) return undefined;\n    return resolveBorderToCSS(navigation.style.dropdown.border);\n  }, [navigation.style?.dropdown?.border]);\n\n  // Shadow is now handled via responsive CSS generation (generateResponsiveSpacingCSS)\n\n  // Early return AFTER all hooks\n  if (content.length === 0) return null;\n\n  // Enhanced resolved colors for dropdown, using dropdown-specific text color if available\n  const dropdownResolvedColors = {\n    ...resolvedColors,\n    text: dropdownMenuTextColor || resolvedColors.text,\n    dropdownMenuLinkColor,\n  };\n\n  const useSameLayerMode = isSameLayer && !isMobileMenu;\n\n  const dropdownStyles: React.CSSProperties = {\n    backgroundColor: useSameLayerMode ? undefined : dropdownMenuBackground,\n    color: dropdownMenuTextColor || dropdownMenuLinkColor,\n    ...(useSameLayerMode ? {} : dropdownMenuBorder),\n  };\n\n  const linkHoverStyle = {\n    \"--dropdown-link-hover-color\": dropdownMenuLinkHoverColor,\n    \"--dropdown-link-hover-background\": dropdownMenuLinkHoverBackground,\n  } as React.CSSProperties;\n\n  return (\n    <>\n      <CSSTransition\n        in={isOpen}\n        nodeRef={nodeRef}\n        timeout={useSameLayerMode ? 250 : getDropdownTimeout(isMobileMenu)}\n        classNames={\n          useSameLayerMode\n            ? \"same-layer-dropdown\"\n            : getDropdownClassNames(isMobileMenu)\n        }\n        unmountOnExit={!useSameLayerMode}\n      >\n        <div\n          ref={nodeRef}\n          className={`relative w-full navigation-dropdown-${dropdownId}`}\n          style={{\n            ...dropdownStyles,\n            ...(useSameLayerMode\n              ? { display: \"grid\", overflow: \"hidden\" }\n              : { overflow: \"hidden\" }),\n            zIndex: getDropdownZIndex(\n              useSameLayerMode,\n              navigation.style?.dropdown?.layer,\n            ),\n            marginTop: navigation.style?.dropdown?.offset?.y\n              ? getBreakpointValue(navigation.style.dropdown.offset.y, \"base\")\n              : \"0\",\n            marginLeft: navigation.style?.dropdown?.offset?.left\n              ? getBreakpointValue(\n                  navigation.style.dropdown.offset.left,\n                  \"base\",\n                )\n              : \"0\",\n            marginRight: navigation.style?.dropdown?.offset?.right\n              ? getBreakpointValue(\n                  navigation.style.dropdown.offset.right,\n                  \"base\",\n                )\n              : \"0\",\n          }}\n        >\n          <div\n            style={\n              useSameLayerMode\n                ? { overflow: \"hidden\", minHeight: 0 }\n                : undefined\n            }\n          >\n            <div\n              style={{\n                display: \"flex\",\n                width: \"100%\",\n                transform: `translateX(-${navigationStack.length * 100}%)`,\n                transition: \"transform 300ms ease-in-out\",\n              }}\n            >\n              {panels.map((panel, panelIndex) => {\n                const isActive = panelIndex === navigationStack.length;\n                const isToRight = panelIndex > navigationStack.length;\n\n                const panelContent = (\n                  <>\n                    {panel.depth > 0 && (\n                      <button\n                        ref={\n                          panelIndex === navigationStack.length\n                            ? backButtonRef\n                            : null\n                        }\n                        onClick={(e) => {\n                          e.preventDefault();\n                          handleBack();\n                        }}\n                        type=\"button\"\n                        data-navigation-internal=\"true\"\n                        className=\"flex items-center px-3 py-2 text-sm rounded-md transition-colors mb-2\"\n                        style={{\n                          color:\n                            resolvedColors.dropdownMenuLinkColor ||\n                            resolvedColors.linkColor,\n                        }}\n                      >\n                        <svg\n                          width=\"16\"\n                          height=\"16\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          className=\"mr-2\"\n                        >\n                          <polyline points=\"15 18 9 12 15 6\" />\n                        </svg>\n                        Back\n                      </button>\n                    )}\n\n                    <div className=\"flex flex-wrap gap-4\">\n                      {panel.content?.map((item: HeaderDropdownContent) => {\n                        if (item.type === \"section\") {\n                          return (\n                            <div key={item.id} className=\"flex-1 min-w-[200px]\">\n                              <DropdownContentItem\n                                content={item}\n                                resolvedColors={dropdownResolvedColors}\n                                onNavigate={handleNavigate}\n                                navigation={navigation}\n                                site={site}\n                              />\n                            </div>\n                          );\n                        }\n                        return (\n                          <div key={item.id} className=\"w-full\">\n                            <DropdownContentItem\n                              content={item}\n                              resolvedColors={dropdownResolvedColors}\n                              onNavigate={handleNavigate}\n                              navigation={navigation}\n                              site={site}\n                            />\n                          </div>\n                        );\n                      })}\n                    </div>\n                  </>\n                );\n\n                return (\n                  <nav\n                    key={panelIndex}\n                    className={`flex flex-col p-2 dropdown-content-${dropdownId}`}\n                    style={{\n                      ...linkHoverStyle,\n                      width: \"100%\",\n                      flexShrink: 0,\n                      transform: isToRight\n                        ? \"translateX(30px)\"\n                        : \"translateX(0)\",\n                      opacity: isActive ? 1 : 0.95,\n                      transition:\n                        \"transform 300ms ease-in-out, opacity 300ms ease-in-out\",\n                    }}\n                    inert={!isActive ? true : undefined}\n                  >\n                    {containerContent ? (\n                      <div className=\"container mx-auto\">{panelContent}</div>\n                    ) : (\n                      panelContent\n                    )}\n                  </nav>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </>\n  );\n}\n"],"mappings":"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","names":["config","panels"]}

package/dist/components/navigation/header.d.ts

@@ -0,0 +1,13 @@
+import { HeaderConfig, Site } from '@otl-core/cms-types';
+import React__default from 'react';
+
+interface NavigationHeaderProps {
+    navigation: HeaderConfig;
+    site: Site;
+    className?: string;
+    siteName?: string;
+    id?: string;
+}
+declare const Header: React__default.FC<NavigationHeaderProps>;
+
+export { Header };

package/dist/components/navigation/header.js

@@ -0,0 +1,305 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { NavigationProvider } from "../../context/navigation-context";
+import {
+  cn,
+  resolveColorToCSS,
+  resolveColorsToCSS
+} from "@otl-core/style-utils";
+import {
+  calculateNavigationWidth,
+  generateNavigationCSS,
+  getBreakpointForWidth,
+  sectionsToDropdownContent
+} from "../../lib/navigation.utils";
+import { NavigationHeaderWrapper } from "../mobile/navigation-header-wrapper";
+import { NavigationDropdown } from "./dropdown";
+import { Navbar } from "./navbar";
+const SHOW_CLASSES = {
+  sm: "hidden sm:flex",
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex",
+  "2xl": "hidden 2xl:flex"
+};
+const HIDE_CLASSES = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+  "2xl": "2xl:hidden"
+};
+const Header = ({
+  navigation,
+  site = {
+    default_locale: "en",
+    supported_locales: ["en"]
+  },
+  className = "",
+  siteName: _siteName = "Logo",
+  id = "default"
+}) => {
+  const isFixed = navigation.style?.position === "fixed";
+  const containerBehavior = navigation.style?.container || "edged";
+  const safeZone = navigation.style?.safeZone;
+  const safeZoneHeight = typeof safeZone === "object" && "base" in safeZone ? safeZone.base : safeZone || "0";
+  const estimatedWidth = calculateNavigationWidth(
+    navigation.sections || [],
+    site
+  );
+  const breakpoint = getBreakpointForWidth(estimatedWidth);
+  const styleType = navigation.style?.type || "default";
+  const showClass = breakpoint ? SHOW_CLASSES[breakpoint] : "";
+  const hideClass = breakpoint ? HIDE_CLASSES[breakpoint] : "";
+  const resolvedColors = navigation.style ? {
+    ...resolveColorsToCSS(
+      Object.fromEntries(
+        Object.entries(navigation.style).filter(
+          ([key]) => key !== "type" && key !== "position" && key !== "container" && key !== "safeZone" && key !== "layout" && key !== "border" && key !== "shadow" && key !== "link" && key !== "burger" && key !== "dropdown" && key !== "background" && key !== "text"
+        )
+      )
+    ),
+    // Manually resolve background and text colors
+    background: resolveColorToCSS(navigation.style.background),
+    text: resolveColorToCSS(navigation.style.text),
+    // Manually resolve link colors
+    linkColor: resolveColorToCSS(navigation.style.link?.color),
+    linkHoverColor: resolveColorToCSS(navigation.style.link?.hoverColor),
+    // Manually resolve burger colors
+    burgerButtonBackground: resolveColorToCSS(
+      navigation.style.burger?.button?.background
+    ),
+    burgerButtonBackgroundHover: resolveColorToCSS(
+      navigation.style.burger?.button?.backgroundHover
+    ),
+    burgerIconColor: resolveColorToCSS(
+      navigation.style.burger?.icon?.color
+    ),
+    burgerIconHover: resolveColorToCSS(
+      navigation.style.burger?.icon?.hoverColor
+    )
+  } : {};
+  const headerStyles = {
+    ...resolvedColors.background && {
+      backgroundColor: resolvedColors.background
+    },
+    ...resolvedColors.text && {
+      color: resolvedColors.text
+    }
+  };
+  const linkStyle = {
+    ...resolvedColors.linkColor && { color: resolvedColors.linkColor }
+  };
+  const marginValue = typeof navigation.style?.layout?.margin === "object" && "base" in navigation.style.layout.margin ? navigation.style.layout.margin.base : navigation.style?.layout?.margin || "0";
+  const sortedSections = [...navigation.sections || []].sort(
+    (a, b) => a.order - b.order
+  );
+  let togglerSectionId = navigation.togglerSectionId;
+  if (togglerSectionId === "none") {
+    togglerSectionId = "";
+  } else if (!togglerSectionId) {
+    const hasContent = sortedSections.some(
+      (section) => section.items?.some((item) => item.type !== "logo")
+    );
+    if (hasContent) {
+      const nonLogoSections = sortedSections.filter(
+        (section) => !section.items?.some(
+          (item) => item.type === "logo"
+        )
+      );
+      if (nonLogoSections.length > 0) {
+        togglerSectionId = nonLogoSections[nonLogoSections.length - 1].id;
+      }
+    }
+  }
+  const dropdownItems = [];
+  sortedSections.forEach((section) => {
+    section.items?.forEach((item) => {
+      if (item.type === "dropdown") {
+        dropdownItems.push({
+          item,
+          config: item.config || {}
+        });
+      }
+    });
+  });
+  const dropdownIds = [
+    `mobile-menu-${id}`,
+    ...(dropdownItems || []).map((d) => d.item.id)
+  ];
+  const styles = generateNavigationCSS(
+    id,
+    navigation,
+    resolvedColors,
+    dropdownIds
+  );
+  const isSameLayer = navigation.style?.dropdown?.layer === "same";
+  if (styleType === "minimal") {
+    const navbarAndDropdowns = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Navbar,
+        {
+          id,
+          className,
+          headerStyles: isSameLayer ? {} : headerStyles,
+          sortedSections,
+          navigation,
+          resolvedColors,
+          togglerSectionId: togglerSectionId || "navbar",
+          itemsShowClass: "hidden",
+          togglerHideClass: "",
+          site,
+          mobileMenuId: `mobile-menu-${id}`,
+          containerContent: containerBehavior === "edged",
+          isSameLayer
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NavigationDropdown,
+        {
+          itemId: `mobile-menu-${id}`,
+          config: { content: sectionsToDropdownContent(sortedSections) },
+          navigation,
+          resolvedColors,
+          styles: headerStyles,
+          linkStyle,
+          dropdownId: `mobile-menu-${id}`,
+          site,
+          containerContent: containerBehavior === "edged",
+          isSameLayer
+        }
+      ),
+      dropdownItems?.map(({ item, config }) => /* @__PURE__ */ jsx(
+        NavigationDropdown,
+        {
+          itemId: item.id,
+          config,
+          navigation,
+          resolvedColors,
+          styles: headerStyles,
+          linkStyle,
+          dropdownId: item.id,
+          site,
+          containerContent: containerBehavior === "edged",
+          isSameLayer
+        },
+        item.id
+      ))
+    ] });
+    const navbarContent2 = isSameLayer ? /* @__PURE__ */ jsx("div", { className: `navbar-wrapper-${id}`, style: headerStyles, children: navbarAndDropdowns }) : navbarAndDropdowns;
+    const navbarWithContainer2 = containerBehavior === "boxed" ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: navbarContent2 }) : navbarContent2;
+    const headerContent2 = /* @__PURE__ */ jsx(
+      NavigationHeaderWrapper,
+      {
+        className: cn(
+          "relative",
+          isFixed ? "fixed top-0 left-0 right-0 z-50" : "absolute top-0 left-0 right-0 z-50"
+        ),
+        style: { margin: marginValue },
+        "data-container": containerBehavior,
+        children: navbarWithContainer2
+      }
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      styles && /* @__PURE__ */ jsx("style", { children: styles }),
+      /* @__PURE__ */ jsxs(NavigationProvider, { children: [
+        headerContent2,
+        safeZoneHeight && safeZoneHeight !== "0" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "header-safe-zone bg-surface",
+            style: { height: safeZoneHeight },
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    ] });
+  }
+  const defaultNavbarAndDropdowns = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Navbar,
+      {
+        id,
+        className,
+        headerStyles: isSameLayer ? {} : headerStyles,
+        sortedSections,
+        navigation,
+        resolvedColors,
+        togglerSectionId: togglerSectionId || "navbar",
+        itemsShowClass: showClass,
+        togglerHideClass: hideClass,
+        site,
+        mobileMenuId: `mobile-menu-${id}`,
+        containerContent: containerBehavior === "edged",
+        isSameLayer
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavigationDropdown,
+      {
+        itemId: `mobile-menu-${id}`,
+        config: { content: sectionsToDropdownContent(sortedSections) },
+        navigation,
+        resolvedColors,
+        styles: headerStyles,
+        linkStyle,
+        dropdownId: `mobile-menu-${id}`,
+        site,
+        containerContent: containerBehavior === "edged",
+        isSameLayer
+      }
+    ),
+    dropdownItems?.map(
+      ({
+        item,
+        config
+      }) => /* @__PURE__ */ jsx(
+        NavigationDropdown,
+        {
+          config,
+          itemId: item.id,
+          navigation,
+          resolvedColors,
+          styles: headerStyles,
+          linkStyle,
+          dropdownId: item.id,
+          site,
+          containerContent: containerBehavior === "edged",
+          isSameLayer
+        },
+        item.id
+      )
+    )
+  ] });
+  const navbarContent = isSameLayer ? /* @__PURE__ */ jsx("div", { className: `navbar-wrapper-${id}`, style: headerStyles, children: defaultNavbarAndDropdowns }) : defaultNavbarAndDropdowns;
+  const navbarWithContainer = containerBehavior === "boxed" ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: navbarContent }) : navbarContent;
+  const headerContent = /* @__PURE__ */ jsx(
+    NavigationHeaderWrapper,
+    {
+      className: cn(
+        "relative",
+        isFixed ? "fixed top-0 left-0 right-0 z-50" : "absolute top-0 left-0 right-0 z-50"
+      ),
+      style: { margin: marginValue },
+      "data-container": containerBehavior,
+      children: navbarWithContainer
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles && /* @__PURE__ */ jsx("style", { children: styles }),
+    /* @__PURE__ */ jsxs(NavigationProvider, { children: [
+      headerContent,
+      safeZoneHeight && safeZoneHeight !== "0" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "header-safe-zone bg-surface",
+          style: { height: safeZoneHeight },
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Header
+};
+//# sourceMappingURL=header.js.map

package/dist/components/navigation/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/header.tsx"],"sourcesContent":["import {\n  ColorReference,\n  Site,\n  HeaderConfig,\n  HeaderNavigationItem,\n  HeaderNavigationItemConfig,\n} from \"@otl-core/cms-types\";\nimport React from \"react\";\nimport { NavigationProvider } from \"../../context/navigation-context\";\nimport {\n  cn,\n  resolveColorToCSS,\n  resolveColorsToCSS,\n} from \"@otl-core/style-utils\";\nimport {\n  calculateNavigationWidth,\n  generateNavigationCSS,\n  getBreakpointForWidth,\n  sectionsToDropdownContent,\n} from \"../../lib/navigation.utils\";\nimport { NavigationHeaderWrapper } from \"../mobile/navigation-header-wrapper\";\nimport { NavigationDropdown } from \"./dropdown\";\nimport { Navbar } from \"./navbar\";\n\nconst SHOW_CLASSES = {\n  sm: \"hidden sm:flex\",\n  md: \"hidden md:flex\",\n  lg: \"hidden lg:flex\",\n  xl: \"hidden xl:flex\",\n  \"2xl\": \"hidden 2xl:flex\",\n} as const;\n\nconst HIDE_CLASSES = {\n  sm: \"sm:hidden\",\n  md: \"md:hidden\",\n  lg: \"lg:hidden\",\n  xl: \"xl:hidden\",\n  \"2xl\": \"2xl:hidden\",\n} as const;\n\ninterface NavigationHeaderProps {\n  navigation: HeaderConfig;\n  site: Site;\n  className?: string;\n  siteName?: string;\n  id?: string;\n}\n\nexport const Header: React.FC<NavigationHeaderProps> = ({\n  navigation,\n  site = {\n    default_locale: \"en\",\n    supported_locales: [\"en\"],\n  } as Site,\n  className = \"\",\n  siteName: _siteName = \"Logo\",\n  id = \"default\",\n}) => {\n  const isFixed = navigation.style?.position === \"fixed\";\n  const containerBehavior = navigation.style?.container || \"edged\";\n  const safeZone = navigation.style?.safeZone;\n  const safeZoneHeight =\n    typeof safeZone === \"object\" && \"base\" in safeZone\n      ? safeZone.base\n      : safeZone || \"0\";\n\n  const estimatedWidth = calculateNavigationWidth(\n    navigation.sections || [],\n    site,\n  );\n  const breakpoint = getBreakpointForWidth(estimatedWidth);\n\n  const styleType = navigation.style?.type || \"default\";\n\n  const showClass = breakpoint ? SHOW_CLASSES[breakpoint] : \"\";\n  const hideClass = breakpoint ? HIDE_CLASSES[breakpoint] : \"\";\n\n  const resolvedColors: Record<string, string | undefined> = navigation.style\n    ? {\n        ...resolveColorsToCSS(\n          Object.fromEntries(\n            Object.entries(navigation.style).filter(\n              ([key]) =>\n                key !== \"type\" &&\n                key !== \"position\" &&\n                key !== \"container\" &&\n                key !== \"safeZone\" &&\n                key !== \"layout\" &&\n                key !== \"border\" &&\n                key !== \"shadow\" &&\n                key !== \"link\" &&\n                key !== \"burger\" &&\n                key !== \"dropdown\" &&\n                key !== \"background\" &&\n                key !== \"text\",\n            ),\n          ) as Record<string, ColorReference | undefined>,\n        ),\n        // Manually resolve background and text colors\n        background: resolveColorToCSS(navigation.style.background),\n        text: resolveColorToCSS(navigation.style.text),\n        // Manually resolve link colors\n        linkColor: resolveColorToCSS(navigation.style.link?.color),\n        linkHoverColor: resolveColorToCSS(navigation.style.link?.hoverColor),\n        // Manually resolve burger colors\n        burgerButtonBackground: resolveColorToCSS(\n          navigation.style.burger?.button?.background,\n        ),\n        burgerButtonBackgroundHover: resolveColorToCSS(\n          navigation.style.burger?.button?.backgroundHover,\n        ),\n        burgerIconColor: resolveColorToCSS(\n          navigation.style.burger?.icon?.color,\n        ),\n        burgerIconHover: resolveColorToCSS(\n          navigation.style.burger?.icon?.hoverColor,\n        ),\n      }\n    : {};\n\n  const headerStyles: React.CSSProperties = {\n    ...(resolvedColors.background && {\n      backgroundColor: resolvedColors.background,\n    }),\n    ...(resolvedColors.text && {\n      color: resolvedColors.text,\n    }),\n  };\n\n  const linkStyle: React.CSSProperties = {\n    ...(resolvedColors.linkColor && { color: resolvedColors.linkColor }),\n  };\n\n  // Extract margin for inline styles\n  const marginValue =\n    typeof navigation.style?.layout?.margin === \"object\" &&\n    \"base\" in navigation.style.layout.margin\n      ? navigation.style.layout.margin.base\n      : navigation.style?.layout?.margin || \"0\";\n\n  const sortedSections = [...(navigation.sections || [])].sort(\n    (a, b) => a.order - b.order,\n  );\n\n  // Determine which section should have the toggler\n  let togglerSectionId = navigation.togglerSectionId;\n\n  // \"none\" means explicitly no mobile toggler at all\n  if (togglerSectionId === \"none\") {\n    togglerSectionId = \"\";\n  } else if (!togglerSectionId) {\n    // If no togglerSectionId specified, auto-assign to last non-logo section if there's content\n    const hasContent = sortedSections.some((section) =>\n      section.items?.some((item: HeaderNavigationItem) => item.type !== \"logo\"),\n    );\n\n    if (hasContent) {\n      const nonLogoSections = sortedSections.filter(\n        (section) =>\n          !section.items?.some(\n            (item: HeaderNavigationItem) => item.type === \"logo\",\n          ),\n      );\n\n      if (nonLogoSections.length > 0) {\n        togglerSectionId = nonLogoSections[nonLogoSections.length - 1].id;\n      }\n    }\n  }\n\n  const dropdownItems: Array<{\n    item: HeaderNavigationItem;\n    config: HeaderNavigationItemConfig;\n  }> = [];\n  sortedSections.forEach((section) => {\n    section.items?.forEach((item: HeaderNavigationItem) => {\n      if (item.type === \"dropdown\") {\n        dropdownItems.push({\n          item: item,\n          config: item.config || {},\n        });\n      }\n    });\n  });\n\n  // Collect all dropdown IDs for CSS generation (including mobile menu)\n  const dropdownIds = [\n    `mobile-menu-${id}`,\n    ...(dropdownItems || []).map((d) => d.item.id),\n  ];\n\n  // Generate all CSS once at the header level\n  const styles = generateNavigationCSS(\n    id,\n    navigation,\n    resolvedColors,\n    dropdownIds,\n  );\n\n  const isSameLayer = navigation.style?.dropdown?.layer === \"same\";\n\n  if (styleType === \"minimal\") {\n    // Minimal mode: All items render in navbar, but items without collapse:false get \"hidden\" class\n    // This means only logo and collapse:false items are VISIBLE\n    const navbarAndDropdowns = (\n      <>\n        <Navbar\n          id={id}\n          className={className}\n          headerStyles={isSameLayer ? {} : headerStyles}\n          sortedSections={sortedSections}\n          navigation={navigation}\n          resolvedColors={resolvedColors}\n          togglerSectionId={togglerSectionId || \"navbar\"}\n          itemsShowClass=\"hidden\" // All items hidden by default in minimal mode\n          togglerHideClass=\"\" // Always show toggler in minimal mode\n          site={site}\n          mobileMenuId={`mobile-menu-${id}`}\n          containerContent={containerBehavior === \"edged\"}\n          isSameLayer={isSameLayer}\n        />\n        <NavigationDropdown\n          itemId={`mobile-menu-${id}`}\n          config={{ content: sectionsToDropdownContent(sortedSections) }}\n          navigation={navigation}\n          resolvedColors={resolvedColors}\n          styles={headerStyles}\n          linkStyle={linkStyle}\n          dropdownId={`mobile-menu-${id}`}\n          site={site}\n          containerContent={containerBehavior === \"edged\"}\n          isSameLayer={isSameLayer}\n        />\n        {dropdownItems?.map(({ item, config }) => (\n          <NavigationDropdown\n            key={item.id}\n            itemId={item.id}\n            config={config}\n            navigation={navigation}\n            resolvedColors={resolvedColors}\n            styles={headerStyles}\n            linkStyle={linkStyle}\n            dropdownId={item.id}\n            site={site}\n            containerContent={containerBehavior === \"edged\"}\n            isSameLayer={isSameLayer}\n          />\n        ))}\n      </>\n    );\n\n    const navbarContent = isSameLayer ? (\n      <div className={`navbar-wrapper-${id}`} style={headerStyles}>\n        {navbarAndDropdowns}\n      </div>\n    ) : (\n      navbarAndDropdowns\n    );\n\n    const navbarWithContainer =\n      containerBehavior === \"boxed\" ? (\n        <div className=\"container mx-auto\">{navbarContent}</div>\n      ) : (\n        navbarContent\n      );\n\n    const headerContent = (\n      <NavigationHeaderWrapper\n        className={cn(\n          \"relative\",\n          isFixed\n            ? \"fixed top-0 left-0 right-0 z-50\"\n            : \"absolute top-0 left-0 right-0 z-50\",\n        )}\n        style={{ margin: marginValue }}\n        data-container={containerBehavior}\n      >\n        {navbarWithContainer}\n      </NavigationHeaderWrapper>\n    );\n\n    return (\n      <>\n        {styles && <style>{styles}</style>}\n        <NavigationProvider>\n          {headerContent}\n          {safeZoneHeight && safeZoneHeight !== \"0\" && (\n            <div\n              className=\"header-safe-zone bg-surface\"\n              style={{ height: safeZoneHeight }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </NavigationProvider>\n      </>\n    );\n  }\n\n  const defaultNavbarAndDropdowns = (\n    <>\n      <Navbar\n        id={id}\n        className={className}\n        headerStyles={isSameLayer ? {} : headerStyles}\n        sortedSections={sortedSections}\n        navigation={navigation}\n        resolvedColors={resolvedColors}\n        togglerSectionId={togglerSectionId || \"navbar\"}\n        itemsShowClass={showClass}\n        togglerHideClass={hideClass}\n        site={site}\n        mobileMenuId={`mobile-menu-${id}`}\n        containerContent={containerBehavior === \"edged\"}\n        isSameLayer={isSameLayer}\n      />\n      <NavigationDropdown\n        itemId={`mobile-menu-${id}`}\n        config={{ content: sectionsToDropdownContent(sortedSections) }}\n        navigation={navigation}\n        resolvedColors={resolvedColors}\n        styles={headerStyles}\n        linkStyle={linkStyle}\n        dropdownId={`mobile-menu-${id}`}\n        site={site}\n        containerContent={containerBehavior === \"edged\"}\n        isSameLayer={isSameLayer}\n      />\n      {dropdownItems?.map(\n        ({\n          item,\n          config,\n        }: {\n          item: HeaderNavigationItem;\n          config: HeaderNavigationItemConfig;\n        }) => (\n          <NavigationDropdown\n            config={config}\n            key={item.id}\n            itemId={item.id}\n            navigation={navigation}\n            resolvedColors={resolvedColors}\n            styles={headerStyles}\n            linkStyle={linkStyle}\n            dropdownId={item.id}\n            site={site}\n            containerContent={containerBehavior === \"edged\"}\n            isSameLayer={isSameLayer}\n          />\n        ),\n      )}\n    </>\n  );\n\n  const navbarContent = isSameLayer ? (\n    <div className={`navbar-wrapper-${id}`} style={headerStyles}>\n      {defaultNavbarAndDropdowns}\n    </div>\n  ) : (\n    defaultNavbarAndDropdowns\n  );\n\n  const navbarWithContainer =\n    containerBehavior === \"boxed\" ? (\n      <div className=\"container mx-auto\">{navbarContent}</div>\n    ) : (\n      navbarContent\n    );\n\n  const headerContent = (\n    <NavigationHeaderWrapper\n      className={cn(\n        \"relative\",\n        isFixed\n          ? \"fixed top-0 left-0 right-0 z-50\"\n          : \"absolute top-0 left-0 right-0 z-50\",\n      )}\n      style={{ margin: marginValue }}\n      data-container={containerBehavior}\n    >\n      {navbarWithContainer}\n    </NavigationHeaderWrapper>\n  );\n\n  return (\n    <>\n      {styles && <style>{styles}</style>}\n      <NavigationProvider>\n        {headerContent}\n        {safeZoneHeight && safeZoneHeight !== \"0\" && (\n          <div\n            className=\"header-safe-zone bg-surface\"\n            style={{ height: safeZoneHeight }}\n            aria-hidden=\"true\"\n          />\n        )}\n      </NavigationProvider>\n    </>\n  );\n};\n"],"mappings":"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","names":["navbarContent","navbarWithContainer","headerContent"]}