srcdev-nuxt-components 2.5.0 → 2.5.1

package/components/responsive-header/NavigationItems.vue

@@ -156,9 +156,7 @@ watch(
                 text-wrap: nowrap;
               }
             }
-            .icon {
-
-            }
+            /* .icon {} */
           }
           .display-details-content {
             .overflow-navigation-sub-nav-inner {
@@ -176,9 +174,7 @@ watch(
                     text-decoration: none;
                     color: inherit;
 
-                    .overflow-navigation-sub-nav-text {
-
-                    }
+                    /* .overflow-navigation-sub-nav-text {} */
                   }
                 }
               }

package/components/responsive-header/ResponsiveHeader.vue

@@ -1,78 +1,61 @@
 <template>
-  <header class="responsive-header" :class="[elementClasses]">
-    <h1><a href="/">Logo</a></h1>
-    <div class="navigation" :class="[{ loaded: navLoaded }]" ref="navigationWrapper">
-      <nav class="main-navigation" ref="mainNav">
-
-        <ul
-          v-for="(navGroup, groupKey) in responsiveNavLinks"
-          :key="groupKey"
-          class="main-navigation-list"
-          :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)"
-        >
-          <template v-for="(link, localIndex) in navGroup" :key="localIndex">
-            <li
-              v-if="link.path"
-              class="main-navigation-item"
-              :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
-              :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
-              ref="mainNavigationItems"
-              :data-group-key="groupKey"
-              :data-local-index="localIndex"
-            >
-              <NuxtLink class="main-navigation-link" :to="link.path">{{ link.name }}</NuxtLink>
-            </li>
-            <li
-              v-else
-              class="main-navigation-item"
-              :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
-              :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
-              ref="mainNavigationItems"
-              :data-group-key="groupKey"
-              :data-local-index="localIndex"
-            >
-              <details
-                class="main-navigation-details"
-                name="navigation-group"
-                ref="navigationDetails"
-              >
-                <summary @mouseover="handleSummaryHover($event)" @focusin="handleSummaryHover($event)" class="main-navigation-link has-toggle-icon">
-                  <Icon name="mdi:chevron-down" class="icon" />
-                  {{ link.childLinksTitle }}
-                </summary>
-                <div class="main-navigation-sub-nav">
-                  <ul class="main-navigation-sub-nav-list">
-                    <li class="main-navigation-sub-nav-item" v-for="childLink in link.childLinks" :key="childLink.name">
-                      <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link">{{ childLink.name }}</NuxtLink>
-                    </li>
-                  </ul>
-                </div>
-              </details>
-            </li>
-          </template>
-        </ul>
-
-      </nav>
-      <nav class="secondary-navigation" ref="secondaryNav">
-        <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]" ref="overflowDetails" name="overflow-group">
-          <summary class="overflow-details-summary has-toggle-icon">
-            <Icon name="gravity-ui:ellipsis" class="icon" />
-          </summary>
-          <div class="overflow-details-nav">
-            <NavigationItems
-              :main-navigation-state="mainNavigationState"
-            />
-          </div>
-        </details>
-        <NuxtLink class="main-navigation-link" to="/"><Icon name="material-symbols:settings-outline-rounded" class="icon" /></NuxtLink>
-      </nav>
-    </div>
-  </header>
-  <LayoutRow
-    tag="div"
-    variant="full"
-    :style-class-passthrough="['mb-20', 'debug-grid']"
-  >
+  <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper">
+    <nav class="main-navigation" ref="mainNav">
+
+      <ul v-for="(navGroup, groupKey) in responsiveNavLinks" :key="groupKey" class="main-navigation-list"
+        :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)">
+        <template v-for="(link, localIndex) in navGroup" :key="localIndex">
+          <li v-if="link.path" class="main-navigation-item"
+            :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+            :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
+            <NuxtLink class="main-navigation-link" :to="link.path">{{ link.name }}</NuxtLink>
+          </li>
+          <li v-else class="main-navigation-item"
+            :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+            :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
+            <details class="main-navigation-details" name="navigation-group" ref="navigationDetails">
+              <summary @mouseover="handleSummaryHover($event)" @focusin="handleSummaryHover($event)"
+                class="main-navigation-details-summary has-toggle-icon">
+                <Icon name="mdi:chevron-down" class="icon" />
+                {{ link.childLinksTitle }}
+              </summary>
+              <div class="main-navigation-sub-nav">
+                <ul class="main-navigation-sub-nav-list">
+                  <li class="main-navigation-sub-nav-item" v-for="childLink in link.childLinks" :key="childLink.name">
+                    <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link">{{ childLink.name }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </details>
+          </li>
+        </template>
+      </ul>
+
+    </nav>
+    <nav class="secondary-navigation" ref="secondaryNav">
+      <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
+        ref="overflowDetails" name="overflow-group">
+        <summary class="overflow-details-summary has-toggle-icon">
+          <Icon name="gravity-ui:ellipsis" class="icon" />
+        </summary>
+        <div class="overflow-details-nav">
+          <NavigationItems :main-navigation-state="mainNavigationState" />
+        </div>
+      </details>
+      <ul class="secondary-navigation-list">
+        <li class="secondary-navigation-item">
+          <NuxtLink class="secondary-navigation-link" to="/">
+            <Icon name="material-symbols:settings-outline-rounded" class="icon" />
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+  </div>
+
+
+  <LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
     <ClientOnly>
       <div>
         <h2 class="heading-4">navigationWrapperRects</h2>
@@ -303,21 +286,8 @@ watch(
 </script>
 
 <style lang="css">
-  .responsive-header {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 24px;
-    align-items: center;
-    padding-block: 12px;
-    padding-inline: 24px;
-
-    /* Make sure always on top of page content */
-    position: relative;
-    z-index: 999999;
-
-    h1 {
-      text-wrap-mode: nowrap;
-    }
+
+  .navigation {
 
     ul,
     ol {
@@ -333,241 +303,249 @@ watch(
       }
     }
 
-    details {
-      --_icon-transform: scaleY(1);
-
-      &[open] {
-        --_icon-transform: scaleY(-1);
-      }
-
-      .has-toggle-icon {
-        display: flex;
-        gap: 6px;
-        text-wrap-mode: nowrap;
+    --_link-visibility-transition: none;
 
-        .icon {
-          display: block;
-          transform: var(--_icon-transform);
-          transition: transform 0.2s ease-in-out;
-        }
-      }
+    &.loaded {
+      --_link-visibility-transition: all 0.2s ease-in-out;
     }
 
-    .navigation {
-      --_link-visibility-transition: none;
+    display: grid;
+    grid-template-areas: 'navStack';
 
-      &.loaded {
-        --_link-visibility-transition: all 0.2s ease-in-out;
-      }
+    margin: 12px;
+    border-radius: 8px;
+    background-color: #efefef05;
+    border: 1px solid #efefef75;
+    padding: 12px;
 
+    .main-navigation {
+      grid-area: navStack;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-grow: 1;
+      justify-content: space-between;
+      gap: 60px;
 
-      display: grid;
-      grid-template-areas: 'navStack';
+      overflow-x: hidden;
+      margin-inline-end: v-bind(`${mainNavigationMarginBlockEnd}px`);
 
-      margin: 12px;
-      border-radius: 8px;
-      background-color: #efefef05;
-      border: 1px solid #efefef75;
-      padding: 12px;
+      &.collapsed {
+        justify-content: flex-start;
+      }
 
-      /*
-      * .main-navigation-link & .main-navigation-details placed here they can also exist within
-      */
-      .main-navigation-link {
+      .main-navigation-list {
         display: flex;
-        text-wrap-mode: nowrap;
-        color: inherit;
-        text-decoration: none;
-      }
+        flex-wrap: nowrap;
 
-      .main-navigation-details {
-        .main-navigation-link {
-          list-style: none;
+        &:nth-of-type(1) {
+          gap: 30px;
         }
 
-        summary::-webkit-details-marker,
-        summary::marker {
-          display: none;
+        &:nth-of-type(2) {
+          gap: 30px;
         }
 
-        summary:hover {
-          cursor: pointer;
-        }
+        .main-navigation-item {
 
-        .main-navigation-sub-nav {
-          position: absolute;
-          padding: 12px;
-          border: 1px solid #efefef75;
-          border-radius: 8px;
-          background-color: #000;
-          translate: 0 12px;
+          width: var(--_main-navigation-item-width);
+          overflow: hidden;
+          transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
 
-          min-width: var(--_main-navigation-item-width);
+          .main-navigation-link {
+            display: flex;
+            text-wrap-mode: nowrap;
+            color: inherit;
+            text-decoration: none;
+            margin-inline-start: 0;
+            transition: var(--_link-visibility-transition);
+          }
 
-          .main-navigation-sub-nav-list {
+          .main-navigation-details {
 
-            display: grid;
-            grid-template-columns: repeat(2, auto);
-            gap: 12px;
+            --_icon-transform: scaleY(1);
 
-            .main-navigation-sub-nav-item {
-              margin-bottom: 8px;
+            margin-inline-start: 0;
+            transition: var(--_link-visibility-transition);
 
-              &:last-child {
-                margin-bottom: 0;
-              }
+            &[open] {
+              --_icon-transform: scaleY(-1);
+            }
+
+            .has-toggle-icon {
+              display: flex;
+              gap: 6px;
+              text-wrap-mode: nowrap;
 
-              .main-navigation-sub-nav-link {
+              .icon {
                 display: block;
-                text-wrap-mode: nowrap;
-                text-decoration: none;
-                color: inherit;
+                transform: var(--_icon-transform);
+                transition: transform 0.2s ease-in-out;
               }
             }
-          }
-        }
-      }
 
-      .main-navigation {
-        grid-area: navStack;
-        display: flex;
-        flex-wrap: nowrap;
-        flex-grow: 1;
-        justify-content: space-between;
-        gap: 60px;
+            .main-navigation-details-summary {
 
-        overflow-x: hidden;
-        margin-inline-end: v-bind(`${mainNavigationMarginBlockEnd}px`);
+              &::-webkit-details-marker,
+              &::marker {
+                display: none;
+              }
 
-        &.collapsed {
-          justify-content: flex-start;
-        }
+              &:hover {
+                cursor: pointer;
+              }
 
-        .main-navigation-list {
-          display: flex;
-          flex-wrap: nowrap;
+            }
 
-          &:nth-of-type(1) {
-            gap: 30px;
-          }
+            .main-navigation-sub-nav {
+              position: absolute;
+              padding: 12px;
+              border: 1px solid #efefef75;
+              border-radius: 8px;
+              background-color: #000;
+              translate: 0 12px;
 
-          &:nth-of-type(2) {
-            gap: 30px;
-          }
+              min-width: var(--_main-navigation-item-width);
 
-          .main-navigation-item {
-            width: var(--_main-navigation-item-width);
-            overflow: hidden;
-            transition:
-              opacity 0.2s ease-in-out,
-              visibility 0.2s ease-in-out;
+              .main-navigation-sub-nav-list {
 
-            .main-navigation-details,
-            .main-navigation-link {
-              margin-inline-start: 0;
-              transition: var(--_link-visibility-transition);
-            }
+                display: grid;
+                grid-template-columns: repeat(2, auto);
+                gap: 12px;
 
-            &.visually-hidden {
-              visibility: hidden;
-              opacity: 0;
+                .main-navigation-sub-nav-item {
+                  margin-bottom: 8px;
 
-              .main-navigation-details,
-              .main-navigation-link {
-                margin-inline-start: var(--_main-navigation-item-width);
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+
+                  .main-navigation-sub-nav-link {
+                    display: block;
+                    text-wrap-mode: nowrap;
+                    text-decoration: none;
+                    color: inherit;
+                  }
+                }
               }
             }
           }
-        }
-      }
 
-      .secondary-navigation {
-        grid-area: navStack;
-        justify-self: end;
-
-        display: flex;
-        gap: 12px;
-        align-items: center;
-
-        > a {
-          /* display: none; */
+          &.visually-hidden {
+            visibility: hidden;
+            opacity: 0;
 
-          .icon {
-            height: 1.35em;
-            width: 1.35em;
+            .main-navigation-details,
+            .main-navigation-link {
+              margin-inline-start: var(--_main-navigation-item-width);
+            }
           }
         }
+      }
+    }
 
-        .overflow-details {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          position: relative;
-          cursor: pointer;
-          width: fit-content;
-          /* overflow: hidden; */
+    .secondary-navigation {
+      grid-area: navStack;
+      justify-self: end;
 
-          transition: all 0.2s ease-in-out;
+      display: flex;
+      gap: 12px;
+      align-items: center;
 
-          &.visually-hidden {
-            opacity: 0;
-            visibility: hidden;
-            /* width: 0; */
-          }
+      .secondary-navigation-list {
 
-          .overflow-details-summary {
-            --_icon-zoom: 1;
+        .secondary-navigation-item {
+
+          .secondary-navigation-link {
             display: flex;
             align-items: center;
-            justify-content: center;
-            padding-inline: 5px;
-            text-wrap: nowrap;
+            font: inherit;
+            color: inherit;
+
+            .icon {
+              height: 1.35em;
+              width: 1.35em;
+            }
+          }
+        }
+      }
 
-            aspect-ratio: 1;
-            border-radius: 4px;
-            border: 1px solid #ffffff90;
-            outline: 1px solid #ffffff10;
-            background-color: Canvas;
+      .main-navigation-link {
+        .icon {
+          height: 1.35em;
+          width: 1.35em;
+        }
+      }
 
-            width: 28px;
-            overflow: hidden;
+      .overflow-details {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        cursor: pointer;
+        width: fit-content;
+        /* overflow: hidden; */
+
+        transition: all 0.2s ease-in-out;
+
+        &.visually-hidden {
+          opacity: 0;
+          visibility: hidden;
+          /* width: 0; */
+        }
 
+        .overflow-details-summary {
+          --_icon-zoom: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding-inline: 5px;
+          text-wrap: nowrap;
 
-            &::-webkit-details-marker,
-            &::marker {
-              display: none;
-            }
+          aspect-ratio: 1;
+          border-radius: 4px;
+          border: 1px solid #ffffff90;
+          outline: 1px solid #ffffff10;
+          background-color: Canvas;
 
-            &:hover {
-              --_icon-zoom: 1.2;
-              outline: 1px solid #ffffff;
-            }
+          width: 28px;
+          overflow: hidden;
 
-            .icon {
-              scale: var(--_icon-zoom);
-              transition: scale 0.2s ease-in-out;
-            }
+
+          &::-webkit-details-marker,
+          &::marker {
+            display: none;
           }
 
+          &:hover {
+            --_icon-zoom: 1.2;
+            outline: 1px solid #ffffff;
+          }
 
-          .overflow-details-nav {
-            position: absolute;
-            top: 135%;
-            right: 0;
-            background-color: #000;
-            border: 1px solid #ffffff90;
-            border-radius: 8px;
-            padding: 12px;
-            margin: 0;
-            z-index: 999;
-            min-width: var(--_overflow-drop-down-width, fit-content);
-
-            display: grid;
-            grid-auto-flow: row;
-            gap: 8px;
+          .icon {
+            scale: var(--_icon-zoom);
+            transition: scale 0.2s ease-in-out;
           }
         }
 
+
+        .overflow-details-nav {
+          position: absolute;
+          top: 135%;
+          right: 0;
+          background-color: #000;
+          border: 1px solid #ffffff90;
+          border-radius: 8px;
+          padding: 12px;
+          margin: 0;
+          z-index: 999;
+          min-width: var(--_overflow-drop-down-width, fit-content);
+
+          display: grid;
+          grid-auto-flow: row;
+          gap: 8px;
+        }
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",