Start refactoring the subnavigation on the CompetenceParentPage

client/src/pages/competence/CompetenceParentPage.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { useCurrentCourseSession, useEvaluationWithFeedback } from "@/composables";
+import {
+  CERTIFICATES_ROUTE,
+  COMPETENCE_ROUTE,
+  COMPETENCES_ROUTE,
+  SELF_EVALUATION_ROUTE,
+} from "@/router/names";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import * as log from "loglevel";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 
 log.debug("CompetenceParentPage created");
 
-const props = defineProps<{
-  courseSlug: string;
-}>();
-
 const route = useRoute();
 
 function routeInOverview() {
@@ -32,19 +35,68 @@ const currentCourseSession = useCurrentCourseSession();
 const hasEvaluationFeedback = useEvaluationWithFeedback().hasFeedback;
 
 onMounted(async () => {
-  log.debug("CompetenceParentPage mounted", props.courseSlug);
+  log.debug("CompetenceParentPage mounted");
 });
+
+const items = [
+  { id: 0, name: "Übersicht" },
+  { id: 1, name: "Teilnehmer" },
+  { id: 2, name: "Unterlagen" },
+  { id: 3, name: "MS Teams", iconName: "it-icon-external-link" },
+  { id: 4, name: "Vorschau Teilnehmer", iconName: "it-icon-external-link" },
+];
+const competenceRoute = {
+  name: COMPETENCE_ROUTE,
+};
+const certificatesRoute = {
+  name: CERTIFICATES_ROUTE,
+};
+const selfEvaluationRoute = {
+  name: SELF_EVALUATION_ROUTE,
+};
+const competencesRoute = {
+  name: COMPETENCES_ROUTE,
+};
 </script>
 
 <template>
   <div class="bg-gray-200">
     <nav class="border-b bg-white px-4 lg:px-8">
-      <ul class="flex flex-col lg:flex-row">
+      <Listbox as="div">
+        <div class="relative w-full">
+          <ListboxButton
+            class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left"
+          >
+            Übersicht
+            <span
+              class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+            >
+              <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
+            </span>
+          </ListboxButton>
+          <ListboxOptions
+            class="absolute top-14 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
+          >
+            <ListboxOption
+              v-for="item in items"
+              :key="item.id"
+              as="router-link"
+              class="flex w-full items-center gap-2 border-b py-3 pl-5 pr-10 last:border-b-0"
+            >
+              <router-link to="/">
+                {{ item.name }}
+              </router-link>
+              <component :is="item.iconName" v-if="item.iconName"></component>
+            </ListboxOption>
+          </ListboxOptions>
+        </div>
+      </Listbox>
+      <ul class="hidden flex-col lg:flex lg:flex-row">
         <li
           class="border-t-2 border-t-transparent"
           :class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
         >
-          <router-link :to="`/course/${courseSlug}/competence`" class="block py-3">
+          <router-link :to="competenceRoute" class="block py-3">
             {{ $t("a.Übersicht") }}
           </router-link>
         </li>
@@ -55,10 +107,7 @@ onMounted(async () => {
           class="border-t-2 border-t-transparent lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
         >
-          <router-link
-            :to="`/course/${courseSlug}/competence/certificates`"
-            class="block py-3"
-          >
+          <router-link :to="certificatesRoute" class="block py-3">
             {{ $t("a.Kompetenznachweise") }}
           </router-link>
         </li>
@@ -69,7 +118,7 @@ onMounted(async () => {
           }"
         >
           <router-link
-            :to="`/course/${courseSlug}/competence/self-evaluation-and-feedback`"
+            :to="selfEvaluationRoute"
             class="block py-3"
             data-cy="self-evaluation-and-feedback-navigation-link"
           >
@@ -84,10 +133,7 @@ onMounted(async () => {
           class="border-t-2 border-t-transparent lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
         >
-          <router-link
-            :to="`/course/${courseSlug}/competence/competences`"
-            class="block py-3"
-          >
+          <router-link :to="competencesRoute" class="block py-3">
             {{ $t("a.Handlungskompetenzen") }}
           </router-link>
         </li>

client/src/router/index.ts

@@ -13,6 +13,12 @@ import {
 import { addToHistory, setLastNavigationWasPush } from "@/router/history";
 import { onboardingRedirect } from "@/router/onboarding";
 import { createRouter, createWebHistory } from "vue-router";
+import {
+  CERTIFICATES_ROUTE,
+  COMPETENCE_ROUTE,
+  COMPETENCES_ROUTE,
+  SELF_EVALUATION_ROUTE,
+} from "./names";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -107,10 +113,12 @@ const router = createRouter({
         {
           path: "",
           props: true,
+          name: COMPETENCE_ROUTE,
           component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
         },
         {
           path: "certificates",
+          name: CERTIFICATES_ROUTE,
           props: true,
           component: () =>
             import("@/pages/competence/CompetenceCertificateListPage.vue"),
@@ -122,7 +130,7 @@ const router = createRouter({
             import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
         },
         {
-          name: "selfEvaluationAndFeedback",
+          name: SELF_EVALUATION_ROUTE,
           path: "self-evaluation-and-feedback",
           props: true,
           component: () =>
@@ -130,6 +138,7 @@ const router = createRouter({
         },
         {
           path: "competences",
+          name: COMPETENCES_ROUTE,
           props: true,
           component: () => import("@/pages/competence/ActionCompetenceListPage.vue"),
         },

client/src/router/names.ts

@@ -0,0 +1,4 @@
+export const COMPETENCE_ROUTE = "competence";
+export const CERTIFICATES_ROUTE = "certificates";
+export const SELF_EVALUATION_ROUTE = "selfEvaluationAndFeedback";
+export const COMPETENCES_ROUTE = "competences";