@asd20/ui 3.2.840 → 3.2.841

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.840",
+  "version": "3.2.841",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20ActionMenu/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="asd20-action-menu">
+  <div :class="emptyNav ? 'asd20-action-menu emptyNav' : 'asd20-action-menu'">
     <asd20-action-menu-item
       v-for="(item, index) in items"
       :key="index"
@@ -21,6 +21,7 @@ export default {
     open: { type: Boolean, default: false },
     items: { type: Array, default: () => actionItems },
     zoomed: { type: Boolean, default: false },
+    emptyNav: { type: Boolean, default: false },
   },
 
   computed: {
@@ -86,6 +87,9 @@ export default {
     flex-basis: calc(100% / 3);
   }
 }
+.emptyNav {
+  top: space(2);
+}
 
 @media (min-width: 768px) {
   .asd20-action-menu {
@@ -140,5 +144,8 @@ export default {
       }
     }
   }
+  .emptyNav {
+    top: unset;
+  }
 }
 </style>

package/src/components/organisms/Asd20Navbar/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div :class="classes">
     <asd20-action-menu-item
-      v-if="!emptyNav"
       ref="menuButton"
       id="menu-toggle-button"
       aria-owns="main-menu-list"
       :aria-expanded="menuActive ? 'true' : 'false'"
       :size="desktop && !zoomed ? 'lg' : 'md'"
-      class="menu-button"
+      :class="emptyNav ? 'menu-button emptyNav' : 'menu-button'"
       :icon="menuActive ? 'close' : 'menu'"
       :label="menuActive ? 'Close' : 'Menu'"
       :active="menuActive"
@@ -153,10 +152,12 @@ $logo-width: 50vw;
       ::v-deep .asd20-icon g{
         // --line-color: var(--website-icon__fill-color);
         // --fill-color: red;
-    }
+      }
     }
   }
-  
+  .emptyNav {
+    display: initial;
+  }
 }
 
 @keyframes navbar-collapse {
@@ -234,6 +235,9 @@ $logo-width: 50vw;
       animation: none;
     }
   }
+  .emptyNav {
+    display: none !important;
+  }
 }
 @media (min-width: 1024px) {
   .navbar

package/src/components/organisms/Asd20SiteMenu/index.vue

@@ -18,7 +18,7 @@
   <div
     id="main-menu-list"
     ref="menuContainer"
-    class="asd20-site-menu"
+    :class="emptyNav ? 'asd20-site-menu emptyNav' : 'asd20-site-menu'"
     @click="onBackgroundClick"
     @focus="onFocus"
     @blur="onBlur"
@@ -30,7 +30,11 @@
     @keyup.escape="deactivateSection"
     tabindex="-1"
   >
-    <focus-trap :active="active" :initial-focus="() => $refs.focused[0]">
+    <focus-trap
+      v-if="!emptyNav"
+      :active="active"
+      :initial-focus="() => $refs.focused[0]"
+    >
       <div class="asd20-site-menu__viewport">
         <transition name="slide-right" role="group">
           <div
@@ -129,6 +133,7 @@ export default {
   props: {
     sections: { type: Array, default: () => [] },
     active: { type: Boolean, default: false },
+    emptyNav: { type: Boolean, default: false },
   },
   data: () => ({
     activeSectionIndex: -1,
@@ -145,7 +150,9 @@ export default {
     },
   },
   mounted() {
-    this.setFocus()
+    if (!this.emptyNav) {
+      this.setFocus()
+    }
   },
   methods: {
     onFocus(event) {
@@ -463,6 +470,10 @@ export default {
   }
   // display: none;
 }
+.emptyNav {
+  display: none;
+}
+
 @media (min-width: 768px) {
   .asd20-site-menu__section {
     flex-grow: 0.1;

package/src/components/organisms/Asd20SiteNavigation/index.vue

@@ -9,8 +9,8 @@
       :collapsed="collapsed"
       :zoomed="zoomed"
       :desktop="desktop"
-      @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
       :emptyNav="emptyNav"
+      @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
     >
       <!-- <asd20-district-logo
         v-show="
@@ -50,6 +50,7 @@
         :items="actionItems"
         :active="menuOpen"
         :zoomed="zoomed"
+        :emptyNav="emptyNav"
         @update:active="$emit('update:menuOpen', $event)"
       />
     </transition>
@@ -71,6 +72,7 @@
         :active="menuOpen"
         @update:active="$emit('update:menuOpen', $event)"
         :sections="navigation"
+        :emptyNav="emptyNav"
       />
     </transition>
 
@@ -244,7 +246,6 @@ export default {
     &::before {
       left: space(3);
     }
-
     .asd20-site-search.slide-enter,
     .asd20-site-search.slide-leave-to {
       transform: translate3d(-100%, 0, 0);