srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/03.organisms/responsive-header/NavigationItems.vue

@@ -27,15 +27,23 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           role="none"
           @mouseenter="hoveredItemKey = `${String(groupKey)}-${localIndex}`"
         >
-          <NuxtLink class="overflow-navigation-link" :to="link.path" role="menuitem">
+          <a
+            v-if="isAnchorPath(link.path)"
+            class="overflow-navigation-link"
+            :href="link.path"
+            role="menuitem"
+            @click="emit('anchorClick', $event, link.path)"
+          >
+            <span class="overflow-navigation-text">{{ link.name }}</span>
+          </a>
+          <NuxtLink v-else class="overflow-navigation-link" :to="link.path" role="menuitem">
             <span class="overflow-navigation-text">{{ link.name }}</span>
           </NuxtLink>
         </li>
@@ -48,8 +56,7 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
@@ -66,11 +73,11 @@
             <template #summary>
               <span
                 class="overflow-navigation-text"
-                :aria-label="`${link.childLinksTitle} submenu`"
+                :aria-label="submenuLabel(link)"
                 role="menuitem"
                 :aria-haspopup="true"
               >
-                {{ link.childLinksTitle }}
+                {{ link.childLinksTitle ?? link.name }}
               </span>
             </template>
             <template #icon>
@@ -81,7 +88,7 @@
                 <ul class="overflow-navigation-sub-nav-list" @mouseleave="hoveredChildKey = null">
                   <li
                     v-for="(childLink, childIndex) in link.childLinks"
-                    :key="childLink.name"
+                    :key="childIndex"
                     class="overflow-navigation-sub-nav-item"
                     :class="{
                       'is-hovered': hoveredChildKey === `${String(groupKey)}-${localIndex}-${childIndex}`,
@@ -89,7 +96,16 @@
                     }"
                     @mouseenter="hoveredChildKey = `${String(groupKey)}-${localIndex}-${childIndex}`"
                   >
-                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link" role="menuitem">
+                    <a
+                      v-if="childLink.path && isAnchorPath(childLink.path)"
+                      :href="childLink.path"
+                      class="overflow-navigation-sub-nav-link"
+                      role="menuitem"
+                      @click="emit('anchorClick', $event, childLink.path)"
+                    >
+                      <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
+                    </a>
+                    <NuxtLink v-else :to="childLink.path" class="overflow-navigation-sub-nav-link" role="menuitem">
                       <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
                     </NuxtLink>
                   </li>
@@ -117,6 +133,10 @@ interface Props {
   styleClassPassthrough?: string | string[];
   /** aria-label on the overflow menu — override for localisation. */
   ariaLabel?: string;
+  /** aria-label on each submenu summary; {title} is replaced with the item's title. */
+  submenuAriaLabel?: string;
+  /** The active "#anchor" path, owned by ResponsiveHeader so both menus agree. */
+  activeHash?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -127,8 +147,17 @@ const props = withDefaults(defineProps<Props>(), {
   panelVariant: "classic",
   styleClassPassthrough: () => [],
   ariaLabel: "Overflow navigation menu",
+  submenuAriaLabel: "{title} submenu",
+  activeHash: "",
 });
 
+const emit = defineEmits<{
+  anchorClick: [event: MouseEvent, href: string];
+}>();
+
+const submenuLabel = (link: ResponsiveHeaderNavItem) =>
+  props.submenuAriaLabel.replace("{title}", link.childLinksTitle ?? link.name);
+
 const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));
 
 const hoveredItemKey = ref<string | null>(null);
@@ -158,9 +187,13 @@ onUnmounted(() => {
 
 const route = useRoute();
 
+const isAnchorPath = (path?: string) => Boolean(path?.startsWith("#"));
+const isCurrentPath = (path?: string) =>
+  Boolean(path) && (isAnchorPath(path) ? path === props.activeHash : path === route.path);
+
 const isActiveNavItem = (link: ResponsiveHeaderNavItem): boolean => {
-  if (link.path) return route.path === link.path;
-  if (link.childLinks) return link.childLinks.some((child) => child.path && route.path === child.path);
+  if (link.path) return isCurrentPath(link.path);
+  if (link.childLinks) return link.childLinks.some((child) => isCurrentPath(child.path));
   return false;
 };
 // const DETAILS_ANIMATION_DURATION_STRING = `${DETAILS_ANIMATION_DURATION}ms` as const;
@@ -178,6 +211,9 @@ const widestNavLinkWidthInMainNavigationState = computed(() => {
   }, 0);
 });
 
+const itemWidth = (link?: ResponsiveHeaderNavItem) =>
+  link?.config?.width === undefined ? undefined : `${link.config.width}px`;
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 // Performance: Use immediate flag and more efficient watching
@@ -199,6 +235,7 @@ watch(
        on this element to avoid cascade conflicts with ancestor overrides.
 
        --overflow-nav-padding-inline         (default: 0.8rem)
+       --overflow-nav-max-inline-size        (default: calc(100vw - 3.2rem))
        --overflow-nav-items-gap              (default: 0px)
        --overflow-nav-items-padding-block    (default: 0.8rem)
 
@@ -212,10 +249,15 @@ watch(
        --overflow-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 6%))
     ──────────────────────────────────────────────────────────────────────── */
 
+    --_max-inline-size: var(--overflow-nav-max-inline-size, calc(100vw - 3.2rem));
+
     display: flex;
     flex-direction: column;
     gap: var(--overflow-nav-items-gap, 0px);
     position: relative;
+    inline-size: max-content;
+    max-inline-size: var(--_max-inline-size);
+    overflow-wrap: anywhere;
 
     .overflow-navigation-list {
       display: none;
@@ -224,7 +266,7 @@ watch(
         display: flex;
         flex-direction: column;
         gap: var(--overflow-nav-items-gap, 0px);
-        min-width: var(--_overflow-navigation-list-min-width, auto);
+        min-width: min(var(--_overflow-navigation-list-min-width, 0px), var(--_max-inline-size));
       }
 
       .overflow-navigation-item {
@@ -262,9 +304,7 @@ watch(
                 border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
 
                 .label-wrapper {
-                  .overflow-navigation-text {
-                    white-space: nowrap;
-                  }
+                  min-inline-size: 0;
                 }
                 .icon-wrapper {
                   padding: 0;
@@ -325,9 +365,7 @@ watch(
                 border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
 
                 .label-wrapper {
-                  .overflow-navigation-text {
-                    white-space: nowrap;
-                  }
+                  min-inline-size: 0;
                 }
                 .icon-wrapper {
                   padding: 0;

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -32,16 +32,25 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           @mouseenter="handleNavigationItemHover(`${String(groupKey)}-${localIndex}`)"
           @focusin="handleNavigationItemHover(`${String(groupKey)}-${localIndex}`)"
         >
+          <a
+            v-if="link.path && isAnchorPath(link.path)"
+            class="main-navigation-link"
+            :class="{ 'has-icon': link.iconName }"
+            :href="link.path"
+            @click="handleAnchorClick($event, link.path)"
+          >
+            <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
+            {{ link.name }}
+          </a>
           <NuxtLink
-            v-if="link.path"
+            v-else-if="link.path"
             class="main-navigation-link"
             :class="{ 'has-icon': link.iconName }"
             :to="link.path"
@@ -52,7 +61,7 @@
           <details v-else ref="navigationDetails" class="main-navigation-details" name="navigation-group">
             <summary
               class="main-navigation-details-summary has-toggle-icon"
-              :aria-label="`${link.childLinksTitle} submenu`"
+              :aria-label="submenuLabel(link)"
               @mouseenter="handleSummaryHover($event)"
               @focusin="handleSummaryHover($event)"
               @click.prevent="handleSummaryAction($event)"
@@ -61,12 +70,25 @@
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
               <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
 
-              {{ link.childLinksTitle }}
+              {{ link.childLinksTitle ?? link.name }}
             </summary>
             <div class="main-navigation-sub-nav" role="menu" @mouseenter="handleSubNavHover">
               <ul class="main-navigation-sub-nav-list">
-                <li v-for="childLink in link.childLinks" :key="childLink.name" class="main-navigation-sub-nav-item">
-                  <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">
+                <li
+                  v-for="(childLink, childIndex) in link.childLinks"
+                  :key="childIndex"
+                  class="main-navigation-sub-nav-item"
+                >
+                  <a
+                    v-if="childLink.path && isAnchorPath(childLink.path)"
+                    :href="childLink.path"
+                    class="main-navigation-sub-nav-link"
+                    role="menuitem"
+                    @click="handleAnchorClick($event, childLink.path)"
+                  >
+                    {{ childLink.name }}
+                  </a>
+                  <NuxtLink v-else :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">
                     {{ childLink.name }}
                   </NuxtLink>
                 </li>
@@ -85,7 +107,7 @@
         :class="overflowDetailsClass ? [overflowDetailsClass] : []"
         name="overflow-group"
       >
-        <summary class="overflow-details-summary has-toggle-icon">
+        <summary class="overflow-details-summary has-toggle-icon" :aria-label="overflowButtonLabel">
           <Icon
             :name="overflowDetailsSummaryIcons.more ?? 'gravity-ui:ellipsis'"
             class="icon"
@@ -104,6 +126,9 @@
             :main-navigation-state="mainNavigationState"
             :panel-variant="panelVariant"
             :aria-label="overflowMenuAriaLabel"
+            :submenu-aria-label="submenuAriaLabel"
+            :active-hash="activeHash"
+            @anchor-click="handleAnchorClick"
           />
         </div>
       </details>
@@ -136,6 +161,15 @@ interface Props {
   secondaryNavAriaLabel?: string;
   /** aria-label on the overflow menu itself (forwarded to NavigationItems) — override for localisation. */
   overflowMenuAriaLabel?: string;
+  /** Accessible name of the overflow/burger button, which shows only icons. */
+  overflowButtonLabel?: string;
+  /** aria-label on each dropdown summary; {title} is replaced with the item's title. Forwarded to NavigationItems. */
+  submenuAriaLabel?: string;
+  /**
+   * Pixels to leave above a section when a same-page "#anchor" link scrolls to it (e.g. a sticky
+   * header's height). Pass a getter to read it at click time.
+   */
+  anchorScrollOffset?: number | (() => number);
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -155,8 +189,14 @@ const props = withDefaults(defineProps<Props>(), {
   mainNavAriaLabel: "Main navigation",
   secondaryNavAriaLabel: "Secondary navigation",
   overflowMenuAriaLabel: "Overflow navigation menu",
+  overflowButtonLabel: "More navigation",
+  submenuAriaLabel: "{title} submenu",
+  anchorScrollOffset: undefined,
 });
 
+const submenuLabel = (link: ResponsiveHeaderNavItem) =>
+  props.submenuAriaLabel.replace("{title}", link.childLinksTitle ?? link.name);
+
 const collapseNavigationBelowWidth = computed(
   () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
 );
@@ -173,6 +213,7 @@ const {
 const slots = useSlots();
 
 const navigationWrapperRef = useTemplateRef<HTMLDivElement>("navigationWrapper");
+const mainNavRef = useTemplateRef<HTMLElement>("mainNav");
 
 const closeAllNavigationDetails = () => {
   navigationDetailsRefs.value?.forEach((element) => {
@@ -301,12 +342,32 @@ const hoveredItemKey = ref<string | null>(null);
 
 const route = useRoute();
 
+// "#anchor" paths are same-page section links: plain <a>, smooth-scrolled, active by hash.
+const { handleNavClick, activeHash } = useAnchorScroll({ offset: props.anchorScrollOffset });
+const isAnchorPath = (path?: string) => Boolean(path?.startsWith("#"));
+const isCurrentPath = (path?: string) =>
+  Boolean(path) && (isAnchorPath(path) ? path === activeHash.value : path === route.path);
+
 const isActiveNavItem = (link: ResponsiveHeaderNavItem): boolean => {
-  if (link.path) return route.path === link.path;
-  if (link.childLinks) return link.childLinks.some((child) => child.path && route.path === child.path);
+  if (link.path) return isCurrentPath(link.path);
+  if (link.childLinks) return link.childLinks.some((child) => isCurrentPath(child.path));
   return false;
 };
 
+const handleAnchorClick = (event: MouseEvent, href: string) => {
+  handleNavClick(event, href);
+  closeAllNavigationDetails();
+};
+
+onMounted(() => {
+  if (activeHash.value) return;
+  const firstAnchor = Object.values(props.responsiveNavLinks)
+    .flat()
+    .flatMap((link) => [link, ...(link.childLinks ?? [])])
+    .find((link) => isAnchorPath(link.path));
+  if (firstAnchor?.path) activeHash.value = firstAnchor.path;
+});
+
 const isAnimated = ref(true);
 
 // Local (non-useState) flag — resets to false on every mount.
@@ -361,7 +422,10 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
     firstNav: false,
     secondNav: false,
   },
-  clonedNavLinks: props.responsiveNavLinks,
+  // Copied so the geometry pass's config writes never land in the consumer's own nav data
+  clonedNavLinks: Object.fromEntries(
+    Object.entries(props.responsiveNavLinks).map(([groupKey, group]) => [groupKey, group.map((link) => ({ ...link }))])
+  ),
   hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
 });
 
@@ -398,12 +462,13 @@ const navigationDetailsRefs = useTemplateRef<HTMLElement[]>("navigationDetails")
 
 const overflowDetailsRef = useTemplateRef<HTMLDetailsElement>("overflowDetails");
 
-const showOverflowDetails = computed(() => {
-  const hasHiddenNav =
-    !mainNavigationState.value.navListVisibility["firstNav"] ||
-    (!mainNavigationState.value.navListVisibility["secondNav"] && mainNavigationState.value.hasSecondNav);
-  return hasHiddenNav;
-});
+// Item-based rather than reading navListVisibility.firstNav/secondNav, so any group key works and
+// empty nav data never shows a burger with nothing in it
+const showOverflowDetails = computed(() =>
+  Object.values(mainNavigationState.value.clonedNavLinks ?? {}).some((group) =>
+    group.some((link) => link.config?.visible === false)
+  )
+);
 
 const mainNavigationMarginBlockEnd = computed(() => {
   return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
@@ -462,20 +527,18 @@ const determineNavigationItemVisibility = (rect: DOMRect) => {
     return false;
   }
 
-  // Use default responsive visibility logic if wrapper exists
-  if (navigationWrapperRects.value) {
-    return (
-      Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) <
-      navigationWrapperRects.value.right
-    );
-  }
-
-  // Default to visible
-  return true;
+  // An item fits if it ends within the main nav, whose margin-inline-end already reserves the
+  // secondary nav plus the gap. Measured live with the item so both read the same layout.
+  const mainNavRect = mainNavRef.value?.getBoundingClientRect();
+  if (!mainNavRect) return true;
+  return Math.floor(rect.right) <= Math.floor(mainNavRect.right);
 };
 
 const initMainNavigationState = () => {
-  if (!mainNavigationItemsRefs.value) return;
+  if (!mainNavigationItemsRefs.value?.length) {
+    isGeometryReady.value = true;
+    return;
+  }
 
   mainNavigationItemsRefs.value.forEach(async (item) => {
     // await nextTick()
@@ -642,6 +705,9 @@ onMounted(async () => {
 
 useResizeObserver(navigationWrapperRef, runGeometryPass);
 
+const itemWidth = (link?: ResponsiveHeaderNavItem) =>
+  link?.config?.width === undefined ? undefined : `${link.config.width}px`;
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -690,6 +756,8 @@ watch(
        --responsive-header-sub-nav-border       (default: 1px solid #efefef75)
        --responsive-header-sub-nav-border-radius (default: 8px)
        --responsive-header-sub-nav-padding      (default: 12px)
+       --responsive-header-sub-nav-max-inline-size (default: min(48rem, calc(100vw - 3.2rem)))
+       --responsive-header-sub-nav-max-block-size  (default: 70vh)
 
        --responsive-header-overflow-btn-bg              (default: Canvas)
        --responsive-header-overflow-btn-size            (default: 20px)
@@ -702,12 +770,14 @@ watch(
        --responsive-header-overflow-nav-border          (default: 1px solid #ffffff90)
        --responsive-header-overflow-nav-border-radius   (default: 8px)
        --responsive-header-overflow-nav-padding-block   (default: 12px)
+       --responsive-header-overflow-nav-max-block-size  (default: 70vh)
 
        --responsive-nav-decorator-indicator-color         (default: currentColor)
        --responsive-nav-decorator-hovered-indicator-color (default: inherits --responsive-nav-decorator-indicator-color)
        --responsive-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 8%))
 
        --responsive-header-link-font-size       (default: inherit)
+       --responsive-header-main-nav-justify-content (default: space-between)
     ──────────────────────────────────────────────────────────────────────── */
 
     /* `inherit` means a viewport-relative (vw/clamp) ancestor font-size silently
@@ -749,7 +819,7 @@ watch(
       display: flex;
       flex-wrap: nowrap;
       flex-grow: 1;
-      justify-content: space-between;
+      justify-content: var(--responsive-header-main-nav-justify-content, space-between);
       gap: 60px;
       overflow-x: hidden;
       margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
@@ -868,6 +938,9 @@ watch(
               translate: 0 12px;
 
               min-width: var(--_main-navigation-item-width);
+              max-inline-size: var(--responsive-header-sub-nav-max-inline-size, min(48rem, calc(100vw - 3.2rem)));
+              max-block-size: var(--responsive-header-sub-nav-max-block-size, 70vh);
+              overflow-y: auto;
 
               .main-navigation-sub-nav-list {
                 display: grid;
@@ -883,7 +956,7 @@ watch(
 
                   .main-navigation-sub-nav-link {
                     display: block;
-                    white-space: nowrap;
+                    overflow-wrap: anywhere;
                     text-decoration: none;
                     color: var(--responsive-header-link-color, inherit);
                   }
@@ -1048,7 +1121,9 @@ watch(
           padding-block: var(--responsive-header-overflow-nav-padding-block, 12px);
           margin: 0;
           z-index: 999;
-          min-width: var(--_overflow-drop-down-width, fit-content);
+          min-width: fit-content;
+          max-block-size: var(--responsive-header-overflow-nav-max-block-size, 70vh);
+          overflow-y: auto;
 
           display: grid;
           grid-auto-flow: row;