srcdev-nuxt-components 2.5.5 → 2.5.7

package/components/responsive-header/ResponsiveHeader.vue

@@ -38,9 +38,8 @@
       <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
         ref="overflowDetails" name="overflow-group">
         <summary class="overflow-details-summary has-toggle-icon">
-          <slot v-if="hasOverflowDetailsSummaryIcon" name="overflowDetailsSummaryIcon">
-            <Icon name="gravity-ui:ellipsis" class="icon" />
-          </slot>
+          <Icon :name="overflowDetailsSummaryIcons.more" class="icon" :class="[{ show: !allowNavigationCollapse }]" />
+          <Icon :name="overflowDetailsSummaryIcons.burger" class="icon" :class="[{ show: allowNavigationCollapse }]" />
         </summary>
         <div class="overflow-details-nav">
           <NavigationItems :main-navigation-state="mainNavigationState" />
@@ -79,6 +78,21 @@ const props = defineProps({
     type: Number,
     default: 12, // px
   },
+  overflowDetailsSummaryIcons: {
+    type: Object as PropType<Record<string, string>>,
+    default: {
+      more: 'gravity-ui:ellipsis',
+      burger: 'gravity-ui:bars',
+    }
+  },
+  collapseNavigationBelowWidth: {
+    type: Boolean,
+    default: true,
+  },
+  collapseBreakpoint: {
+    type: Number,
+    default: 500, // px
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -87,7 +101,6 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasSecondaryNavigation = computed(() => slots.secondaryNavigation !== undefined);
-const hasOverflowDetailsSummaryIcon = computed(() => slots.overflowDetailsSummaryIcon !== undefined);
 
 const navLoaded = ref(false);
 const navigationWrapperRef = useTemplateRef('navigationWrapper');
@@ -173,6 +186,25 @@ const updateNavigationConfig = async (source: string) => {
   secondNavRects.value = getFlooredRect((secondNavRef.value && secondNavRef.value.getBoundingClientRect()) ?? null) || null;
 }
 
+const allowNavigationCollapse = computed(() => {
+  return props.collapseNavigationBelowWidth && navigationWrapperRects.value && navigationWrapperRects.value.width < props.collapseBreakpoint;
+});
+
+const determineNavigationItemVisibility = (rect: DOMRect) => {
+  // Check if navigation should be collapsed based on width
+  if (allowNavigationCollapse.value) {
+    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;
+};
+
 const initMainNavigationState = () => {
   if (!mainNavigationItemsRefs.value) return;
 
@@ -195,7 +227,7 @@ const initMainNavigationState = () => {
           left: item.offsetLeft,
           right: item.offsetLeft + item.offsetWidth,
           width: item.offsetWidth,
-          visible: navigationWrapperRects.value ? Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) < navigationWrapperRects.value.right : true,
+          visible: determineNavigationItemVisibility(rect),
         },
       };
     }
@@ -461,8 +493,11 @@ watch(
 
         .overflow-details-summary {
           --_icon-zoom: 1;
-          --_icon-size: 30px;
-          display: flex;
+          --_icon-size: 20px;
+          --_border-width: 1px;
+          --_outline-width: 1px;
+          display: grid;
+          grid-template-areas: 'icon';
           align-items: center;
           justify-content: center;
           padding-inline: 5px;
@@ -470,8 +505,8 @@ watch(
 
           aspect-ratio: 1;
           border-radius: 4px;
-          border: 1px solid #ffffff90;
-          outline: 1px solid #ffffff10;
+          border: var(--_border-width) solid #ffffff90;
+          outline: var(--_outline-width) solid #ffffff10;
           background-color: Canvas;
 
           width: var(--_icon-size);
@@ -486,14 +521,22 @@ watch(
 
           &:hover {
             --_icon-zoom: 1.2;
-            outline: 1px solid #ffffff;
+            outline: var(--_outline-width) solid #ffffff;
           }
 
           .icon {
+            grid-area: icon;
             scale: var(--_icon-zoom);
             transition: scale 0.2s ease-in-out;
-            width: var(--_icon-size);
-            height: var(--_icon-size);
+            width: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
+            height: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
+
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+
+            &.show {
+              opacity: 1;
+            }
           }
         }
 

package/package.json

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