From 0c1a2b3151d80340f1dc8dc3e4a2bcb122fe712a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sat, 26 Oct 2024 20:57:48 +0200
Subject: [PATCH] Update mobile subnavigation to indicate the active item

---
 client/src/components/header/SubNavItem.vue   |  8 +++-
 .../pages/competence/CompetenceParentPage.vue | 44 ++++++++++++++-----
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
index 29a2f3cb..69c4f074 100644
--- a/client/src/components/header/SubNavItem.vue
+++ b/client/src/components/header/SubNavItem.vue
@@ -18,7 +18,13 @@ const isExternalLink = computed(() => {
 </script>
 
 <template>
-  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
+  <a
+    v-if="isExternalLink"
+    class="flex items-center gap-2"
+    v-bind="$attrs"
+    :href="to"
+    target="_blank"
+  >
     <slot />
     <it-icon-external-link />
   </a>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index c26dccc3..665507ba 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -7,10 +7,10 @@ import {
   COMPETENCES_ROUTE,
   SELF_EVALUATION_ROUTE,
 } from "@/router/names";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
+import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import { useTranslation } from "i18next-vue";
 import * as log from "loglevel";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
 log.debug("CompetenceParentPage created");
@@ -64,31 +64,38 @@ const items = [
   { id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },
 
   {
-    id: 3,
+    id: 4,
     name: "MS Teams",
     iconName: "it-icon-external-link",
     route: "https://iterativ.ch",
   },
   {
-    id: 3,
+    id: 5,
     name: "Vorschau Teilnehmer",
     iconName: "it-icon-external-link",
     route: "https://iterativ.ch",
   },
-  // { id: 4, name: "Vorschau Teilnehmer", iconName: "it-icon-external-link" },
 ];
 const currentRouteName = computed(() => {
   return items.find((item) => isCurrentRoute(item.route))?.name || "";
 });
+const open = ref<boolean>(false);
+const currentRoute = ref(items.find((item) => isCurrentRoute(item.route)));
+const selectRoute = (current) => {
+  // we use this to mimic VueRouter's active flag
+  open.value = false;
+  currentRoute.value = current;
+};
 </script>
 
 <template>
   <div class="bg-gray-200">
     <nav class="border-b bg-white px-4 lg:px-8">
-      <Listbox as="div">
-        <div class="relative w-full">
-          <ListboxButton
+      <Listbox as="div" :model-value="currentRoute" by="id">
+        <div class="relative w-full py-2 lg:hidden">
+          <button
             class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left"
+            @click="open = !open"
           >
             {{ currentRouteName }}
             <span
@@ -96,15 +103,28 @@ const currentRouteName = computed(() => {
             >
               <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
             </span>
-          </ListboxButton>
+          </button>
           <ListboxOptions
-            class="absolute top-14 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
+            v-if="open"
+            class="absolute top-14 z-50 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
+            static
           >
-            <ListboxOption v-for="item in items" :key="item.id">
+            <ListboxOption
+              v-for="item in items"
+              :key="item.id"
+              v-slot="{ selected }"
+              :value="item"
+              class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
+            >
               <SubNavItem
-                class="flex w-full items-center gap-2 border-b py-3 pl-5 pr-10 last:border-b-0"
                 :to="item.route"
+                class="flex items-center gap-2"
+                @click="selectRoute(item)"
               >
+                <it-icon-check
+                  v-if="selected"
+                  class="absolute left-2 top-1/2 w-8 -translate-y-1/2"
+                />
                 {{ item.name }}
               </SubNavItem>
             </ListboxOption>