@mirweb/mir-web-components 2.10.1 → 2.11.1

package/dist/components/organisms/header/header.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="header__wrapper">
+  <div
+    class="header__wrapper"
+    :class="{
+      'header--hide-burger': !hasBurgerContent,
+      'header--align-secondary-right': !hasBurgerContent,
+    }"
+  >
     <nav aria-label="Main navigation">
       <!-- Main nav -->
       <div class="nav-wrapper">
@@ -207,6 +213,7 @@
             </div>
           </div>
           <button
+            v-if="hasBurgerContent"
             class="mobile-burger-wrapper"
             aria-label="Toggle mobile menu"
             @click.prevent="toggleBurger"
@@ -223,7 +230,10 @@
             />
           </button>
         </div>
-        <div v-show="burgerState" class="mobile-menu-content-wrapper">
+        <div
+          v-show="hasBurgerContent && burgerState"
+          class="mobile-menu-content-wrapper"
+        >
           <ul>
             <slot name="mobile-main-nav-items"></slot>
           </ul>
@@ -238,10 +248,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch, useSlots } from "vue";
 import AtomLink from "../../atoms/link/link.vue";
 
 let clickEventListener: ((e: MouseEvent) => void) | null = null;
+const slots = useSlots();
 const props = defineProps({
   burgerState: {
     type: Boolean,
@@ -290,6 +301,29 @@ const props = defineProps({
   },
 });
 let burgerState = ref(props.burgerState);
+
+// Hide burger automatically when there's nothing to show in it (no nav links, no dropdown)
+const hasBurgerContent = computed(() => {
+  const mainNav = slots["main-nav-items"]?.();
+  const mobileMainNav = slots["mobile-main-nav-items"]?.();
+  const hasNavItems =
+    (mainNav?.length ?? 0) > 0 || (mobileMainNav?.length ?? 0) > 0;
+
+  if (props.useDropdown) {
+    const dropTitle = slots["dropdown-title"]?.();
+    const dropLinks = slots["dropdown-links"]?.();
+    const mobileDropTitle = slots["mobile-dropdown-title"]?.();
+    const mobileDropLinks = slots["mobile-dropdown-links"]?.();
+    const hasDropdownItems =
+      (dropTitle?.length ?? 0) > 0 ||
+      (dropLinks?.length ?? 0) > 0 ||
+      (mobileDropTitle?.length ?? 0) > 0 ||
+      (mobileDropLinks?.length ?? 0) > 0;
+    return hasNavItems || hasDropdownItems;
+  }
+
+  return hasNavItems;
+});
 let search = ref(props.search);
 let showDropDown = ref(props.showDropDown);
 let showPortalSwitcherDropDown = ref(props.showPortalSwitcherDropDown);
@@ -406,6 +440,10 @@ defineExpose({
   gap: 15px;
 }
 
+.header--align-secondary-right .secondary-nav-items {
+  margin-left: auto;
+}
+
 .main-nav-items a {
   font-size: $font-size-xsm;
   font-weight: 300;
@@ -564,8 +602,14 @@ defineExpose({
   box-shadow: $box-shadow;
   border-radius: $border-radius;
   padding: 0px;
-  right: 0px;
-  top: 45px;
+  /* Mobile/tablet (< 984px): align with viewport padding */
+  right: 30px;
+  top: 60px;
+
+  @include md {
+    right: 0px;
+    top: 45px;
+  }
 }
 
 .portal-switcher-content {
@@ -750,6 +794,20 @@ defineExpose({
 .mobile-nav-wrapper.mirsaic-mobile-bg::before {
   opacity: 1;
 }
+
+/* When burger has no content: logo left, portal right (no burger, no expandable menu) */
+.header--hide-burger .mobile-logo-search-burger-wrapper {
+  grid-template-columns: 1fr 44px;
+}
+
+.header--hide-burger .mobile-menu-content-wrapper {
+  display: none;
+}
+
+/* Portal dropdown: align right when no burger - mobile uses right: 30px from media query above */
+.header--hide-burger #menu-portal-switcher-mobile .portal-switcher-content {
+  left: auto;
+}
 .mobile-nav-wrapper::before {
   @extend .mirsaic--dark !optional;
   background-size:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirweb/mir-web-components",
   "private": false,
-  "version": "2.10.1",
+  "version": "2.11.1",
   "type": "module",
   "files": [
     "dist"