use a stack for subMenu title

Author: Hofstetter Benjamin

opendata.swiss/ui/app/components/OdsDropdownMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, type PropType } from 'vue';
-import OdsDesktopNavigationPanel from '@/components/OdsDesktopNavigationPanel.vue';
 import OdsButton from './OdsButton.vue';
+import SvgIcon from './SvgIcon.vue';
 import type { OdsNavTabItem } from './headers/model/ods-nav-tab-item';
 
 const props = defineProps({
@@ -36,23 +36,62 @@ const isOpen = ref(false);
 const dropdownRef = ref<HTMLElement | null>(null);
 
 function toggleDropdown() {
-  console.log('toggleDropdown');
   isOpen.value = !isOpen.value;
 }
 
 
+const parentLabelStack = ref<string[]>([props.menu.label]);
+
+const menuStack = ref<OdsNavTabItem[][]>([]);
+
+const menuKey = computed(() => menuStack.value.length);
+
+const currentMenu = computed(() => {
+
+    if (menuStack.value.length === 0) {
+      return props.menu.subMenu ?? []
+    };
+    return menuStack.value[menuStack.value.length - 1];
+});
+
+const direction = ref<'forward' | 'backward'>('forward');
+
+const transitionName = computed(() => direction.value === 'forward' ? 'slide-menu-right' : 'slide-menu-left');
+
+
+function drillDown(item: OdsNavTabItem) {
+    if (item.subMenu && item.subMenu.length > 0) {
+        direction.value = 'forward';
+        menuStack.value.push(item.subMenu);
+        parentLabelStack.value.push(item.label);
+    }
+}
+
+function goBack() {
+    if (menuStack.value.length > 0) {
+        direction.value = 'backward';
+        menuStack.value.pop();
+        parentLabelStack.value.pop();
+    }
+};
+
+// Close dropdown when clicking outside
 function handleClickOutside(event: MouseEvent) {
   if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
     isOpen.value = false;
   }
 }
 
+// start listening for clicks outside the dropdown
 onMounted(() => {
   document.addEventListener('mousedown', handleClickOutside);
 });
+
+// stop listening when component is unmounted
 onBeforeUnmount(() => {
   document.removeEventListener('mousedown', handleClickOutside);
 });
+
 </script>
 
 <template>
@@ -63,25 +102,58 @@ onBeforeUnmount(() => {
     </a>
     <div v-if="isOpen" id="desktop-menu__drawer" class="desktop-menu__drawer ods-drop-down-panel" >
       <div class="close-button-container">
+        <SvgIcon v-if="menuStack.length > 0" icon="ArrowLeft" size="lg"  @click.prevent="goBack"/>
+
+        <div v-else />
+      <!--  <li v-if="menuStack.length > 0" style="border-bottom: none;" @click="goBack">
+                  <a style="padding-top: 12px; padding-bottom: 12px;">
+                    <span>
+                      <SvgIcon icon="ArrowLeft" size="lg"/>
+                    </span>
+                  </a>
+                </li>-->
         <OdsButton
-        icon="Cancel"
-        title="close menu"
-        variant="bare"
-        size="sm"
-        icon-right
-        class="ods-close"
-        @click="isOpen = false"
-      >
+          icon="Cancel"
+          title="close menu"
+          variant="bare"
+          size="sm"
+          icon-right
+          class="ods-close"
+          @click="isOpen = false"
+        >
           <span class="ods-close">Schliessen</span>
         </OdsButton>
       </div>
-      <OdsDesktopNavigationPanel :menu="props.menu"/>
-     <!-- <div v-for="subItem in props.subMenu" :key="subItem.to">
-        <NuxtLinkLocale :to="subItem.to" @click="isOpen = false">
-          {{ props.t(subItem.label) }}
-        </NuxtLinkLocale>
-      </div>-->
+      <Transition :name="transitionName" mode="out-in">
+        <div :key="menuKey">
+          <div class="navy">
+            <h2 class="navy__title">{{ t(parentLabelStack[parentLabelStack.length - 1] ?? '') }}</h2>
 
+            <nav class="navy__level-0 navy-menu__level-0">
+              <ul>
+                <template v-for="item in currentMenu" :key="item.label">
+                  <li v-if="item.to">
+                    <NuxtLinkLocale
+                      :to="item.to"
+                      active-class="active"
+                      :aria-label="t(item.label)"
+                      @click="isOpen = false"
+                    >
+                      <span>{{t(item.label)}}</span>
+                    </NuxtLinkLocale><div/>
+                  </li>
+                  <li
+                    v-else-if="(item.subMenu?.length ?? -1) > 0"
+                    @click="drillDown(item)"
+                  >
+                    <a>{{t(item.label)}} <SvgIcon size="lg" icon="ArrowRight" /></a>
+                  </li>
+                </template>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -90,7 +162,7 @@ onBeforeUnmount(() => {
 
 .close-button-container {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 .ods-close {
   white-space: nowrap;
@@ -110,6 +182,7 @@ onBeforeUnmount(() => {
   padding-right: 48px;
   padding-bottom: 48px;
   padding-top: 24px;
+  z-index: 100;
 }
 .ods-dropdown {
   position: relative;
@@ -147,4 +220,108 @@ onBeforeUnmount(() => {
 .ods-dropdown__menu a:hover {
   background: #f5f5f5;
 }
+
+.holly {
+  margin-top: -40px;
+}
+// list styles
+.navy {
+  position: unset !important;
+  perspective: none !important;
+}
+
+.navy__level-0 {
+  position: unset;
+  ul {
+    display: block;
+  }
+}
+.navy__title {
+  margin-top: 0;
+  margin-left: 12px
+}
+
+li {
+  border-bottom-width: 1px;
+  font-size: 0.875rem;
+  width: 100%;
+  cursor: pointer;
+  line-height: 24px;
+  height: 46px;
+  margin-top: 0 !important;
+
+}
+li:hover {
+    background-color: var(--color-secondary-50);
+}
+
+#mobile-menu {
+  width: 100vw;
+}
+
+ul {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+a {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding-left: 16px;
+  padding-right: 32px;
+  color: black;
+}
+
+.submenu-arrow {
+    float: right;
+    font-size: 1.2em;
+    margin-left: 8px;
+}
+.back-btn {
+    font-weight: bold;
+    color: #2ecc40;
+    cursor: pointer;
+}
+.slide-menu-right-enter-active, .slide-menu-right-leave-active {
+    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
+}
+.slide-menu-right-enter-from {
+    transform: translateX(100%);
+    opacity: 0;
+}
+.slide-menu-right-enter-to {
+    transform: translateX(0);
+    opacity: 1;
+}
+.slide-menu-right-leave-from {
+    transform: translateX(0);
+    opacity: 1;
+}
+.slide-menu-right-leave-to {
+    transform: translateX(-100%);
+    opacity: 0;
+}
+.slide-menu-left-enter-active, .slide-menu-left-leave-active {
+    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
+}
+.slide-menu-left-enter-from {
+    transform: translateX(-100%);
+    opacity: 0;
+}
+.slide-menu-left-enter-to {
+    transform: translateX(0);
+    opacity: 1;
+}
+.slide-menu-left-leave-from {
+    transform: translateX(0);
+    opacity: 1;
+}
+.slide-menu-left-leave-to {
+    transform: translateX(100%);
+    opacity: 0;
+}
 </style>

opendata.swiss/ui/app/constants/navigation-items.ts

@@ -28,10 +28,9 @@ export const APP_NAVIGATION_ITEMS: OdsNavTabItem[] = [
       { label: 'message.header.navigation.terms_of_use', to: '/terms-of-use' },
       { label: 'message.header.navigation.contact', to: '/contact' },
       {
-        label: 'fake sub menu ', subMenu: [
-          { label: 'fake sub menu 1', to: '/about' },
-          { label: 'fake sub menu 2', to: '/terms-of-use' },
-          { label: 'fake sub menu 3', to: '/contact' }
+        label: 'message.header.navigation.imprint', subMenu: [
+          { label: 'message.header.navigation.imprint', to: '/imprint' },
+          { label: 'message.header.navigation.privacy', to: '/privacy' }
         ]
       }
     ]