From 7a782ed911a2eb01b1f50cf2279619378ccdb30d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 11:17:15 +0200
Subject: [PATCH 01/17] Start refactoring the subnavigation on the
 CompetenceParentPage

---
 .../pages/competence/CompetenceParentPage.vue | 78 +++++++++++++++----
 client/src/router/index.ts                    | 11 ++-
 client/src/router/names.ts                    |  4 +
 3 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 client/src/router/names.ts

diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index aeffbddf..720bf287 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/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>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 291e1b53..9e6af33f 100644
--- a/client/src/router/index.ts
+++ b/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"),
         },
diff --git a/client/src/router/names.ts b/client/src/router/names.ts
new file mode 100644
index 00000000..8e41a5c0
--- /dev/null
+++ b/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";

From f2a422157ff4b848f50334ac7d904f44f4a3413c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 11:18:22 +0200
Subject: [PATCH 02/17] Move mobile button

---
 .../components/header/MainNavigationBar.vue   | 22 +++----------------
 .../components/header/MobileMenuButton.vue    |  2 +-
 .../components/header/ProfileMenuButton.vue   |  6 ++++-
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index ddf03760..1343b32e 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -15,12 +15,7 @@ log.debug("MainNavigationBar created");
 
 const courseSessionsStore = useCourseSessionsStore();
 const { inMediaLibrary, inAppointments } = useRouteLookups();
-const { hasMediaLibraryMenu, hasAppointmentsMenu, hasSessionTitle } =
-  useNavigationAttributes();
-
-const selectedCourseSessionTitle = computed(() => {
-  return courseSessionsStore.currentCourseSession?.title;
-});
+const { hasMediaLibraryMenu, hasAppointmentsMenu } = useNavigationAttributes();
 
 const appointmentsUrl = computed(() => {
   const currentCourseSession = courseSessionsStore.currentCourseSession;
@@ -40,7 +35,6 @@ onMounted(() => {
   <nav class="bg-blue-900 text-white">
     <div class="mx-auto px-4 lg:px-8">
       <div class="relative flex h-16 justify-between">
-        <MobileMenuButton />
         <div class="flex flex-1 items-stretch justify-start">
           <HomeNavigation />
           <CourseSessionNavigation />
@@ -62,7 +56,7 @@ onMounted(() => {
             v-if="hasAppointmentsMenu"
             :to="appointmentsUrl"
             data-cy="all-duedates-link"
-            class="nav-item"
+            class="nav-item-no-mobile"
             :class="{ 'nav-item--active': inAppointments() }"
           >
             <it-icon-calendar-light class="h-8 w-8" />
@@ -71,22 +65,12 @@ onMounted(() => {
           <!-- Notification Bell & Menu -->
           <NotificationButton />
 
-          <div
-            v-if="hasSessionTitle"
-            class="nav-item hidden items-center lg:inline-flex"
-          >
-            <div class="" data-cy="current-course-session-title">
-              {{ selectedCourseSessionTitle }}
-            </div>
-          </div>
-
           <div class="nav-item">
             <ProfileMenuButton />
           </div>
         </div>
+        <MobileMenuButton />
       </div>
     </div>
   </nav>
 </template>
-
-<style lang="postcss"></style>
diff --git a/client/src/components/header/MobileMenuButton.vue b/client/src/components/header/MobileMenuButton.vue
index 595a47ba..1d131902 100644
--- a/client/src/components/header/MobileMenuButton.vue
+++ b/client/src/components/header/MobileMenuButton.vue
@@ -45,7 +45,7 @@ const showMenu = ref(false);
       @logout="userStore.handleLogout()"
     />
   </Teleport>
-  <div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
+  <div class="inset-y-0 flex items-center lg:hidden">
     <!-- Mobile menu button -->
     <div data-cy="navigation-mobile-menu-button" class="flex" @click="showMenu = true">
       <button
diff --git a/client/src/components/header/ProfileMenuButton.vue b/client/src/components/header/ProfileMenuButton.vue
index 04a5ec04..8908c1e3 100644
--- a/client/src/components/header/ProfileMenuButton.vue
+++ b/client/src/components/header/ProfileMenuButton.vue
@@ -29,7 +29,11 @@ function popoverClick(event: Event) {
       <AccountMenu @close="showMenu = false" />
     </ItFullScreenModal>
   </Teleport>
-  <div v-if="userStore.loggedIn" class="flex items-center" data-cy="header-profile">
+  <div
+    v-if="userStore.loggedIn"
+    class="hidden items-center lg:flex"
+    data-cy="header-profile"
+  >
     <Popover class="relative">
       <PopoverButton @click="popoverClick($event)">
         <div v-if="userStore.avatar_url">

From 69efd0de2d9002755428a8597e7b84f6ba2deaf3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 11:18:57 +0200
Subject: [PATCH 03/17] Add navigation button to go back to the Dashboard

---
 client/src/components/header/HomeNavigation.vue | 16 +++++++++++++---
 client/src/utils/route.ts                       |  7 +++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/client/src/components/header/HomeNavigation.vue b/client/src/components/header/HomeNavigation.vue
index ff28e2e7..868b911f 100644
--- a/client/src/components/header/HomeNavigation.vue
+++ b/client/src/components/header/HomeNavigation.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { useRouteLookups } from "@/utils/route";
 import { useTranslation } from "i18next-vue";
+const { isInCourse } = useRouteLookups();
 
 const { t } = useTranslation();
 </script>
 
 <template>
-  <div class="hidden flex-shrink-0 items-center lg:flex">
-    <div class="flex items-center">
+  <div class="flex flex-shrink-0 items-center">
+    <template v-if="isInCourse">
+      <div class="flex items-center">
+        <router-link to="/" class="flex items-center border-r border-white pr-3">
+          <it-icon-arrow-left />
+          <span class="hidden text-slate-500 lg:inline">Dashboard</span>
+        </router-link>
+      </div>
+    </template>
+    <template v-else>
       <router-link to="/" class="flex">
         <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
       </router-link>
@@ -15,6 +25,6 @@ const { t } = useTranslation();
           {{ t("general.title") }}
         </div>
       </router-link>
-    </div>
+    </template>
   </div>
 </template>
diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
index 0b0c9e26..2fcf97cc 100644
--- a/client/src/utils/route.ts
+++ b/client/src/utils/route.ts
@@ -1,3 +1,4 @@
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 
 export function useRouteLookups() {
@@ -7,11 +8,15 @@ export function useRouteLookups() {
     return route.path.startsWith("/course/");
   }
 
+  const isInCourse = computed(() => inCourse());
+
   function inCockpit() {
     const regex = new RegExp("/course/[^/]+/cockpit($|/)");
     return regex.test(route.path);
   }
 
+  const isInCockpit = computed(() => inCockpit());
+
   function inLearningPath() {
     const regex = new RegExp("/course/[^/]+/learn($|/)");
     return regex.test(route.path);
@@ -39,7 +44,9 @@ export function useRouteLookups() {
 
   return {
     inMediaLibrary,
+    isInCourse,
     inCockpit,
+    isInCockpit,
     inLearningPath,
     inCompetenceProfile,
     inLearningMentor,

From 28027eb96f5deab11453cbc7d9aef39e0acea3a5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 11:20:01 +0200
Subject: [PATCH 04/17] Move selected course session indicator

---
 .../header/CourseSessionNavigation.vue        | 11 ++++++++---
 .../header/SelectedCourseSession.vue          | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/header/SelectedCourseSession.vue

diff --git a/client/src/components/header/CourseSessionNavigation.vue b/client/src/components/header/CourseSessionNavigation.vue
index 4ff81cd6..e756e5d2 100644
--- a/client/src/components/header/CourseSessionNavigation.vue
+++ b/client/src/components/header/CourseSessionNavigation.vue
@@ -10,11 +10,12 @@ import {
 } from "@/utils/utils";
 import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
+import SelectedCourseSession from "./SelectedCourseSession.vue";
 
 const { t } = useTranslation();
 const courseSessionsStore = useCourseSessionsStore();
 
-const { inCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
+const { isInCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
   useRouteLookups();
 const {
   hasCompetenceNaviMenu,
@@ -30,13 +31,17 @@ const mentorTabTitle = computed(() =>
 );
 </script>
 <template>
-  <div v-if="courseSessionsStore.currentCourseSession" class="hidden space-x-8 lg:flex">
+  <div
+    v-if="courseSessionsStore.currentCourseSession"
+    class="hidden space-x-8 px-10 lg:flex"
+  >
+    <SelectedCourseSession />
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"
       :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
       class="nav-item"
-      :class="{ 'nav-item--active': inCockpit() }"
+      :class="{ 'nav-item--active': isInCockpit }"
     >
       {{ t("cockpit.title") }}
     </router-link>
diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
new file mode 100644
index 00000000..95725bd4
--- /dev/null
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useNavigationAttributes } from "@/utils/navigation";
+import { computed } from "vue";
+
+const courseSessionsStore = useCourseSessionsStore();
+const { hasSessionTitle } = useNavigationAttributes();
+
+const selectedCourseSessionTitle = computed(() => {
+  return courseSessionsStore.currentCourseSession?.title;
+});
+</script>
+<template>
+  <div v-if="hasSessionTitle" class="nav-item hidden items-center lg:inline-flex">
+    <div class="" data-cy="current-course-session-title">
+      {{ selectedCourseSessionTitle }}
+    </div>
+  </div>
+</template>

From 6c6bbb9e22ae397b450ae8794475883585b67730 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 17:03:08 +0200
Subject: [PATCH 05/17] Simplify Subnavigation and create component to handle
 external vs internal links

---
 client/src/components/header/SubNavItem.vue   |  35 +++++
 .../pages/competence/CompetenceParentPage.vue | 142 ++++++++----------
 2 files changed, 97 insertions(+), 80 deletions(-)
 create mode 100644 client/src/components/header/SubNavItem.vue

diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
new file mode 100644
index 00000000..29a2f3cb
--- /dev/null
+++ b/client/src/components/header/SubNavItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+// https://router.vuejs.org/guide/advanced/extending-router-link
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  // @ts-expect-error the example above mentions needing @ts-ignore
+  ...RouterLink.props,
+});
+
+const isExternalLink = computed(() => {
+  return typeof props.to === "string" && props.to.startsWith("https");
+});
+</script>
+
+<template>
+  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
+    <slot />
+    <it-icon-external-link />
+  </a>
+  <router-link v-else v-slot="{ isActive, href, navigate }" v-bind="$props" custom>
+    <a
+      v-bind="$attrs"
+      :class="isActive ? activeClass : ''"
+      :href="href"
+      @click="navigate"
+    >
+      <slot />
+    </a>
+  </router-link>
+</template>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 720bf287..c26dccc3 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SubNavItem from "@/components/header/SubNavItem.vue";
 import { useCurrentCourseSession, useEvaluationWithFeedback } from "@/composables";
 import {
   CERTIFICATES_ROUTE,
@@ -7,29 +8,16 @@ import {
   SELF_EVALUATION_ROUTE,
 } from "@/router/names";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
+import { useTranslation } from "i18next-vue";
 import * as log from "loglevel";
-import { onMounted } from "vue";
-import { useRoute } from "vue-router";
+import { computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
 
 log.debug("CompetenceParentPage created");
 
-const route = useRoute();
+const router = useRouter();
 
-function routeInOverview() {
-  return route.path.endsWith("/competence");
-}
-
-function routeInCompetenceCertificate() {
-  return route.path.includes("/certificate");
-}
-
-function routeInActionCompetences() {
-  return route.path.endsWith("/competences");
-}
-
-function routeInSelfEvaluationAndFeedback() {
-  return route.path.endsWith("/self-evaluation-and-feedback");
-}
+const { t } = useTranslation();
 
 const currentCourseSession = useCurrentCourseSession();
 const hasEvaluationFeedback = useEvaluationWithFeedback().hasFeedback;
@@ -38,13 +26,6 @@ onMounted(async () => {
   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,
 };
@@ -57,6 +38,48 @@ const selfEvaluationRoute = {
 const competencesRoute = {
   name: COMPETENCES_ROUTE,
 };
+
+const isCurrentRoute = (route: { name: string } | string) => {
+  return typeof route !== "string" && route?.name === router.currentRoute.value.name;
+};
+
+const items = [
+  { id: 0, name: t("a.Übersicht"), route: competenceRoute },
+  ...(currentCourseSession.value.course.configuration.enable_competence_certificates
+    ? [
+        {
+          id: 1,
+          name: t("a.Kompetenznachweise"),
+          route: certificatesRoute,
+        },
+      ]
+    : []),
+  {
+    id: 2,
+    name: hasEvaluationFeedback.value
+      ? t("a.Selbst- und Fremdeinschätzungen")
+      : t("a.Selbsteinschätzungen"),
+    route: selfEvaluationRoute,
+  },
+  { id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },
+
+  {
+    id: 3,
+    name: "MS Teams",
+    iconName: "it-icon-external-link",
+    route: "https://iterativ.ch",
+  },
+  {
+    id: 3,
+    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 || "";
+});
 </script>
 
 <template>
@@ -67,7 +90,7 @@ const competencesRoute = {
           <ListboxButton
             class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left"
           >
-            Übersicht
+            {{ currentRouteName }}
             <span
               class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
             >
@@ -77,69 +100,28 @@ const competencesRoute = {
           <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="/">
+            <ListboxOption v-for="item in items" :key="item.id">
+              <SubNavItem
+                class="flex w-full items-center gap-2 border-b py-3 pl-5 pr-10 last:border-b-0"
+                :to="item.route"
+              >
                 {{ item.name }}
-              </router-link>
-              <component :is="item.iconName" v-if="item.iconName"></component>
+              </SubNavItem>
             </ListboxOption>
           </ListboxOptions>
         </div>
       </Listbox>
-      <ul class="hidden flex-col lg:flex lg:flex-row">
+      <ul class="hidden flex-col gap-12 lg:flex lg:flex-row">
         <li
+          v-for="item in items"
+          :key="item.id"
           class="border-t-2 border-t-transparent"
-          :class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
+          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
         >
-          <router-link :to="competenceRoute" class="block py-3">
-            {{ $t("a.Übersicht") }}
-          </router-link>
+          <SubNavItem :to="item.route" class="block py-3">
+            {{ item.name }}
+          </SubNavItem>
         </li>
-        <li
-          v-if="
-            currentCourseSession.course.configuration.enable_competence_certificates
-          "
-          class="border-t-2 border-t-transparent lg:ml-12"
-          :class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
-        >
-          <router-link :to="certificatesRoute" class="block py-3">
-            {{ $t("a.Kompetenznachweise") }}
-          </router-link>
-        </li>
-        <li
-          class="border-t-2 border-t-transparent lg:ml-12"
-          :class="{
-            'border-b-2 border-b-blue-900': routeInSelfEvaluationAndFeedback(),
-          }"
-        >
-          <router-link
-            :to="selfEvaluationRoute"
-            class="block py-3"
-            data-cy="self-evaluation-and-feedback-navigation-link"
-          >
-            {{
-              hasEvaluationFeedback
-                ? $t("a.Selbst- und Fremdeinschätzungen")
-                : $t("a.Selbsteinschätzungen")
-            }}
-          </router-link>
-        </li>
-        <li
-          class="border-t-2 border-t-transparent lg:ml-12"
-          :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
-        >
-          <router-link :to="competencesRoute" class="block py-3">
-            {{ $t("a.Handlungskompetenzen") }}
-          </router-link>
-        </li>
-
-        <!-- Add similar logic for other `li` items as you expand the list -->
-        <li class="ml-6 inline-block lg:ml-12"></li>
       </ul>
     </nav>
     <main>

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 06/17] 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>

From e5cbdc1620a4e1e3b2f405fce75b8de05c6afdff Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sat, 26 Oct 2024 20:58:52 +0200
Subject: [PATCH 07/17] Add styling to active mobile navigation item

---
 client/src/components/header/MobileMenu.vue | 68 +++++++++++++--------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 010c8417..b70345bc 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -71,56 +71,74 @@ const mentorTabTitle = computed(() =>
         </div>
         <div>
           <div v-if="courseSession" class="mt-6 border-b">
-            <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
-            <ul class="mt-6">
+            <h4 class="px-4 text-sm text-gray-900">{{ courseSession.course.title }}</h4>
+            <ul class="mt-6 flex flex-col">
               <li v-if="hasCockpitMenu" class="mb-6">
-                <button
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-cockpit-link"
-                  @click="clickLink(getCockpitUrl(courseSession.course.slug))"
+                  :to="getCockpitUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("cockpit.title") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasPreviewMenu" class="mb-6">
-                <button
+              <li v-if="hasPreviewMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-preview-link"
-                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
+                  :to="getLearningPathUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("a.Vorschau Teilnehmer") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasLearningPathMenu" class="mb-6">
-                <button
+              <li v-if="hasLearningPathMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-learning-path-link"
-                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
+                  :to="getLearningPathUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("general.learningPath") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasCompetenceNaviMenu" class="mb-6">
-                <button
+              <li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-competence-profile-link"
-                  @click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
+                  :to="getCompetenceNaviUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("competences.title") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasLearningMentor" class="mb-6">
-                <button
+              <li v-if="hasLearningMentor" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-mentor-link"
-                  @click="clickLink(getLearningMentorUrl(courseSession.course.slug))"
+                  :to="getLearningMentorUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t(mentorTabTitle) }}
-                </button>
+                </router-link>
               </li>
 
-              <li v-if="hasMediaLibraryMenu" class="mb-6">
-                <button
+              <li v-if="hasMediaLibraryMenu" class="mb-2 flex">
+                <router-link
                   data-cy="medialibrary-link"
-                  @click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
+                  :to="getMediaCenterUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("a.Mediathek") }}
-                </button>
+                </router-link>
               </li>
               <li
                 v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"

From 228bfd9c27b5b89da88a4e7fa1cc82befb1996d6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 27 Oct 2024 20:02:52 +0100
Subject: [PATCH 08/17] Show selected course session on mobile

---
 .../components/header/CourseSessionNavigation.vue    | 12 ++++++------
 .../src/components/header/SelectedCourseSession.vue  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/header/CourseSessionNavigation.vue b/client/src/components/header/CourseSessionNavigation.vue
index e756e5d2..e191e0f1 100644
--- a/client/src/components/header/CourseSessionNavigation.vue
+++ b/client/src/components/header/CourseSessionNavigation.vue
@@ -33,14 +33,14 @@ const mentorTabTitle = computed(() =>
 <template>
   <div
     v-if="courseSessionsStore.currentCourseSession"
-    class="hidden space-x-8 px-10 lg:flex"
+    class="flex space-x-8 px-2 lg:px-10"
   >
     <SelectedCourseSession />
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"
       :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': isInCockpit }"
     >
       {{ t("cockpit.title") }}
@@ -51,7 +51,7 @@ const mentorTabTitle = computed(() =>
       data-cy="navigation-preview-link"
       :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
       target="_blank"
-      class="nav-item"
+      class="nav-item-no-mobile"
     >
       <div class="flex items-center">
         <span>{{ t("a.Vorschau Teilnehmer") }}</span>
@@ -62,7 +62,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasLearningPathMenu"
       data-cy="navigation-learning-path-link"
       :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inLearningPath() }"
     >
       {{ t("general.learningPath") }}
@@ -72,7 +72,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasCompetenceNaviMenu"
       data-cy="navigation-competence-profile-link"
       :to="getCompetenceNaviUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inCompetenceProfile() }"
     >
       {{ t("competences.title") }}
@@ -82,7 +82,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasLearningMentor"
       data-cy="navigation-learning-mentor-link"
       :to="getLearningMentorUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inLearningMentor() }"
     >
       {{ t(mentorTabTitle) }}
diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
index 95725bd4..688e7c0e 100644
--- a/client/src/components/header/SelectedCourseSession.vue
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -11,7 +11,7 @@ const selectedCourseSessionTitle = computed(() => {
 });
 </script>
 <template>
-  <div v-if="hasSessionTitle" class="nav-item hidden items-center lg:inline-flex">
+  <div v-if="hasSessionTitle" class="nav-item inline-flex items-center lg:inline-flex">
     <div class="" data-cy="current-course-session-title">
       {{ selectedCourseSessionTitle }}
     </div>

From 72c9fe8c9e9122d3d15b82eeb3d2188292565219 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 27 Oct 2024 20:09:48 +0100
Subject: [PATCH 09/17] Update mobile menu

---
 client/src/components/header/MobileMenu.vue | 42 ++++++++++++++-------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index b70345bc..8c81cbe1 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -129,17 +129,6 @@ const mentorTabTitle = computed(() =>
                 </router-link>
               </li>
 
-              <li v-if="hasMediaLibraryMenu" class="mb-2 flex">
-                <router-link
-                  data-cy="medialibrary-link"
-                  class="w-full px-4 py-2"
-                  active-class="bg-gray-200 text-blue-900 font-bold"
-                  :to="getMediaCenterUrl(courseSession.course.slug)"
-                  @click="$emit('closemodal')"
-                >
-                  {{ $t("a.Mediathek") }}
-                </router-link>
-              </li>
               <li
                 v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
                 class="mb-6"
@@ -155,11 +144,38 @@ const mentorTabTitle = computed(() =>
           </div>
           <div class="mt-6 border-b">
             <ul>
-              <li class="mb-6">
-                <button data-cy="dashboard-link" @click="clickLink('/')">myVBV</button>
+              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+                <router-link
+                  data-cy="medialibrary-link"
+                  class="flex w-full items-center gap-2 px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
+                  :to="getMediaCenterUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
+                >
+                  <it-icon-media-library />
+                  {{ $t("a.Mediathek") }}
+                </router-link>
+              </li>
+              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+                <router-link
+                  data-cy="calendar-link"
+                  class="flex w-full items-center gap-2 px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
+                  :to="'/'"
+                  @click="$emit('closemodal')"
+                >
+                  <!-- todo: correct route -->
+                  <it-icon-calendar-light />
+                  {{ $t("a.Termine") }}
+                </router-link>
               </li>
             </ul>
           </div>
+          <button v-if="user?.loggedIn" type="button" class="mt-6 flex items-center">
+            <!-- todo: correct action / route -->
+            <it-icon-settings class="inline-block" />
+            <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
+          </button>
           <button
             v-if="user?.loggedIn"
             type="button"

From 44e618bf9d6517d208459946ef4d18097623d511 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 27 Oct 2024 20:24:35 +0100
Subject: [PATCH 10/17] Move SubNavigation to its own component

---
 client/src/components/header/SubNavItem.vue   |  9 +-
 .../src/components/header/SubNavigation.vue   | 95 +++++++++++++++++++
 .../pages/competence/CompetenceParentPage.vue | 81 +---------------
 client/src/utils/route.ts                     |  2 +-
 4 files changed, 108 insertions(+), 79 deletions(-)
 create mode 100644 client/src/components/header/SubNavigation.vue

diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
index 69c4f074..736e93ab 100644
--- a/client/src/components/header/SubNavItem.vue
+++ b/client/src/components/header/SubNavItem.vue
@@ -28,7 +28,14 @@ const isExternalLink = computed(() => {
     <slot />
     <it-icon-external-link />
   </a>
-  <router-link v-else v-slot="{ isActive, href, navigate }" v-bind="$props" custom>
+  <!-- make `:to` explicit -->
+  <router-link
+    v-else
+    v-slot="{ isActive, href, navigate }"
+    v-bind="$props"
+    :to="$props.to"
+    custom
+  >
     <a
       v-bind="$attrs"
       :class="isActive ? activeClass : ''"
diff --git a/client/src/components/header/SubNavigation.vue b/client/src/components/header/SubNavigation.vue
new file mode 100644
index 00000000..afcd424f
--- /dev/null
+++ b/client/src/components/header/SubNavigation.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import SubNavItem from "@/components/header/SubNavItem.vue";
+import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+export interface EntryRoute {
+  name: string;
+}
+
+export type EntryOrExternalRoute = EntryRoute | string;
+
+export interface SubNavEntry {
+  id: number;
+  name: string;
+  route: EntryOrExternalRoute;
+}
+
+export interface Props {
+  items: SubNavEntry[];
+}
+const props = defineProps<Props>();
+
+const isCurrentRoute = (route: { name: string } | string) => {
+  return typeof route !== "string" && route?.name === router.currentRoute.value.name;
+};
+const currentRouteName = computed(() => {
+  return props.items.find((item) => isCurrentRoute(item.route))?.name || "";
+});
+const open = ref<boolean>(false);
+const currentRoute = ref(props.items.find((item) => isCurrentRoute(item.route)));
+const selectRoute = (current: SubNavEntry) => {
+  // we use this to mimic VueRouter's active flag
+  open.value = false;
+  currentRoute.value = current;
+};
+</script>
+<template>
+  <nav class="border-b bg-white px-4 lg:px-8">
+    <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
+            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>
+        </button>
+        <ListboxOptions
+          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"
+            v-slot="{ selected }"
+            :value="item"
+            class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
+          >
+            <SubNavItem
+              :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>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+    <ul class="hidden flex-col gap-12 lg:flex lg:flex-row">
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="border-t-2 border-t-transparent"
+        :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
+      >
+        <!-- todo: split by external / internal and align external links to the right -->
+        <SubNavItem :to="item.route" class="block py-3">
+          {{ item.name }}
+        </SubNavItem>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 665507ba..170f2a85 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SubNavItem from "@/components/header/SubNavItem.vue";
+import SubNavigation, { type SubNavEntry } from "@/components/header/SubNavigation.vue";
 import { useCurrentCourseSession, useEvaluationWithFeedback } from "@/composables";
 import {
   CERTIFICATES_ROUTE,
@@ -7,16 +7,12 @@ import {
   COMPETENCES_ROUTE,
   SELF_EVALUATION_ROUTE,
 } from "@/router/names";
-import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import { useTranslation } from "i18next-vue";
 import * as log from "loglevel";
-import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
+import { onMounted } from "vue";
 
 log.debug("CompetenceParentPage created");
 
-const router = useRouter();
-
 const { t } = useTranslation();
 
 const currentCourseSession = useCurrentCourseSession();
@@ -39,11 +35,7 @@ const competencesRoute = {
   name: COMPETENCES_ROUTE,
 };
 
-const isCurrentRoute = (route: { name: string } | string) => {
-  return typeof route !== "string" && route?.name === router.currentRoute.value.name;
-};
-
-const items = [
+const items: SubNavEntry[] = [
   { id: 0, name: t("a.Übersicht"), route: competenceRoute },
   ...(currentCourseSession.value.course.configuration.enable_competence_certificates
     ? [
@@ -66,84 +58,19 @@ const items = [
   {
     id: 4,
     name: "MS Teams",
-    iconName: "it-icon-external-link",
     route: "https://iterativ.ch",
   },
   {
     id: 5,
     name: "Vorschau Teilnehmer",
-    iconName: "it-icon-external-link",
     route: "https://iterativ.ch",
   },
 ];
-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" :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
-              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>
-          </button>
-          <ListboxOptions
-            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"
-              v-slot="{ selected }"
-              :value="item"
-              class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
-            >
-              <SubNavItem
-                :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>
-          </ListboxOptions>
-        </div>
-      </Listbox>
-      <ul class="hidden flex-col gap-12 lg:flex lg:flex-row">
-        <li
-          v-for="item in items"
-          :key="item.id"
-          class="border-t-2 border-t-transparent"
-          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
-        >
-          <SubNavItem :to="item.route" class="block py-3">
-            {{ item.name }}
-          </SubNavItem>
-        </li>
-      </ul>
-    </nav>
+    <SubNavigation :items="items" />
     <main>
       <router-view></router-view>
     </main>
diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
index 2fcf97cc..c0b632cf 100644
--- a/client/src/utils/route.ts
+++ b/client/src/utils/route.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRoute } from "vue-router";
 
 export function useRouteLookups() {

From 644a10737715cf91dac9bc85f7a87a955f16dd76 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 28 Oct 2024 09:31:47 +0100
Subject: [PATCH 11/17] Re-add cypress data attribute

---
 client/src/components/header/SubNavigation.vue       | 3 ++-
 client/src/pages/competence/CompetenceParentPage.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/header/SubNavigation.vue b/client/src/components/header/SubNavigation.vue
index afcd424f..7250b767 100644
--- a/client/src/components/header/SubNavigation.vue
+++ b/client/src/components/header/SubNavigation.vue
@@ -15,6 +15,7 @@ export interface SubNavEntry {
   id: number;
   name: string;
   route: EntryOrExternalRoute;
+  dataCy?: string;
 }
 
 export interface Props {
@@ -86,7 +87,7 @@ const selectRoute = (current: SubNavEntry) => {
         :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
       >
         <!-- todo: split by external / internal and align external links to the right -->
-        <SubNavItem :to="item.route" class="block py-3">
+        <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
           {{ item.name }}
         </SubNavItem>
       </li>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 170f2a85..4bbfea32 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -51,6 +51,7 @@ const items: SubNavEntry[] = [
     name: hasEvaluationFeedback.value
       ? t("a.Selbst- und Fremdeinschätzungen")
       : t("a.Selbsteinschätzungen"),
+    dataCy: "self-evaluation-and-feedback-navigation-link",
     route: selfEvaluationRoute,
   },
   { id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },

From 922bb9da32b275d707d9ebde95e73bca5e8b2721 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 28 Oct 2024 09:33:46 +0100
Subject: [PATCH 12/17] Add missing import

---
 client/src/components/header/HeaderBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/header/HeaderBar.vue b/client/src/components/header/HeaderBar.vue
index 13221102..9c01a203 100644
--- a/client/src/components/header/HeaderBar.vue
+++ b/client/src/components/header/HeaderBar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import CoursePreviewBar from "./CoursePreviewBar.vue";
 import MainNavigationBar from "./MainNavigationBar.vue";
 
 const courseSessionsStore = useCourseSessionsStore();

From 31bbf046fa39e5d4869143455d5133825e29a3a3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 Nov 2024 15:51:26 +0100
Subject: [PATCH 13/17] Update styling of mobile menu

---
 client/src/components/header/MobileMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 8c81cbe1..b4507401 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -171,7 +171,7 @@ const mentorTabTitle = computed(() =>
               </li>
             </ul>
           </div>
-          <button v-if="user?.loggedIn" type="button" class="mt-6 flex items-center">
+          <button v-if="user?.loggedIn" type="button" class="px-4 py-2 mt-6 flex items-center">
             <!-- todo: correct action / route -->
             <it-icon-settings class="inline-block" />
             <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
@@ -179,7 +179,7 @@ const mentorTabTitle = computed(() =>
           <button
             v-if="user?.loggedIn"
             type="button"
-            class="mt-6 flex items-center"
+            class="px-4 py-2 mt-6 flex items-center"
             @click="$emit('logout')"
           >
             <it-icon-logout class="inline-block" />

From f560531df25f9cebea2a2419e5767fae2fe9dc7b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 Nov 2024 15:51:59 +0100
Subject: [PATCH 14/17] Split up menu into internal and external links

---
 client/src/components/header/MobileMenu.vue   |  8 +++-
 client/src/components/header/SubNavItem.vue   |  5 +-
 .../src/components/header/SubNavigation.vue   | 46 +++++++++++++------
 client/src/utils/navigation.ts                |  5 ++
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index b4507401..0e44f74c 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -171,7 +171,11 @@ const mentorTabTitle = computed(() =>
               </li>
             </ul>
           </div>
-          <button v-if="user?.loggedIn" type="button" class="px-4 py-2 mt-6 flex items-center">
+          <button
+            v-if="user?.loggedIn"
+            type="button"
+            class="mt-6 flex items-center px-4 py-2"
+          >
             <!-- todo: correct action / route -->
             <it-icon-settings class="inline-block" />
             <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
@@ -179,7 +183,7 @@ const mentorTabTitle = computed(() =>
           <button
             v-if="user?.loggedIn"
             type="button"
-            class="px-4 py-2 mt-6 flex items-center"
+            class="mt-6 flex items-center px-4 py-2"
             @click="$emit('logout')"
           >
             <it-icon-logout class="inline-block" />
diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
index 736e93ab..cb38f36b 100644
--- a/client/src/components/header/SubNavItem.vue
+++ b/client/src/components/header/SubNavItem.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
 // https://router.vuejs.org/guide/advanced/extending-router-link
+import { isExternalLink as isExternalLinkFn } from "@/utils/navigation";
 
 defineOptions({
   inheritAttrs: false,
@@ -13,7 +14,7 @@ const props = defineProps({
 });
 
 const isExternalLink = computed(() => {
-  return typeof props.to === "string" && props.to.startsWith("https");
+  return isExternalLinkFn(props.to);
 });
 </script>
 
@@ -26,7 +27,7 @@ const isExternalLink = computed(() => {
     target="_blank"
   >
     <slot />
-    <it-icon-external-link />
+    <it-icon-external-link class="w-6" />
   </a>
   <!-- make `:to` explicit -->
   <router-link
diff --git a/client/src/components/header/SubNavigation.vue b/client/src/components/header/SubNavigation.vue
index 7250b767..4fecf8b7 100644
--- a/client/src/components/header/SubNavigation.vue
+++ b/client/src/components/header/SubNavigation.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SubNavItem from "@/components/header/SubNavItem.vue";
+import { isExternalLink } from "@/utils/navigation";
 import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -36,6 +37,13 @@ const selectRoute = (current: SubNavEntry) => {
   open.value = false;
   currentRoute.value = current;
 };
+
+const internalLinks = computed(() => {
+  return props.items.filter((i) => !isExternalLink(i.route));
+});
+const externalLinks = computed(() => {
+  return props.items.filter((i) => isExternalLink(i.route));
+});
 </script>
 <template>
   <nav class="border-b bg-white px-4 lg:px-8">
@@ -79,18 +87,30 @@ const selectRoute = (current: SubNavEntry) => {
         </ListboxOptions>
       </div>
     </Listbox>
-    <ul class="hidden flex-col gap-12 lg:flex lg:flex-row">
-      <li
-        v-for="item in items"
-        :key="item.id"
-        class="border-t-2 border-t-transparent"
-        :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
-      >
-        <!-- todo: split by external / internal and align external links to the right -->
-        <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
-          {{ item.name }}
-        </SubNavItem>
-      </li>
-    </ul>
+    <div class="center hidden items-end justify-between lg:flex">
+      <ul class="flex flex-row gap-10">
+        <li
+          v-for="item in internalLinks"
+          :key="item.id"
+          class="border-t-2 border-t-transparent"
+          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
+        >
+          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
+            {{ item.name }}
+          </SubNavItem>
+        </li>
+      </ul>
+      <ul class="flex flex-row gap-10">
+        <li
+          v-for="item in externalLinks"
+          :key="item.id"
+          class="border-b-2 border-t-2 border-b-transparent border-t-transparent"
+        >
+          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
+            {{ item.name }}
+          </SubNavItem>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>
diff --git a/client/src/utils/navigation.ts b/client/src/utils/navigation.ts
index 5c8cd323..d0cbf59d 100644
--- a/client/src/utils/navigation.ts
+++ b/client/src/utils/navigation.ts
@@ -1,6 +1,7 @@
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import { computed } from "vue";
+import type { RouteLocationRaw } from "vue-router";
 import { useRouteLookups } from "./route";
 
 export function useNavigationAttributes() {
@@ -77,3 +78,7 @@ export function useNavigationAttributes() {
     hasSessionTitle,
   };
 }
+
+export const isExternalLink = (route: string | RouteLocationRaw) => {
+  return typeof route === "string" && route.startsWith("https");
+};

From 9b89177db505db723f5375c2c38a4424567cfe9b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Nov 2024 15:38:34 +0100
Subject: [PATCH 15/17] Move course session switcher to top navigation

---
 client/src/components/header/AccountMenu.vue  | 15 +-----
 .../components/header/AccountMenuContent.vue  | 21 +-------
 .../header/CourseSessionNavigation.vue        |  1 +
 .../header/SelectedCourseSession.vue          | 48 ++++++++++++++++++-
 client/tailwind.css                           |  6 ++-
 5 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/client/src/components/header/AccountMenu.vue b/client/src/components/header/AccountMenu.vue
index ac310748..8e08f713 100644
--- a/client/src/components/header/AccountMenu.vue
+++ b/client/src/components/header/AccountMenu.vue
@@ -1,29 +1,16 @@
 <template>
-  <AccountMenuContent
-    :course-sessions="courseSessionsStore.allCurrentCourseSessions"
-    :selected-course-session="courseSessionsStore.currentCourseSession?.id"
-    :user="userStore"
-    @logout="logout"
-    @select-course-session="selectCourseSession"
-    @close="emit('close')"
-  />
+  <AccountMenuContent :user="userStore" @logout="logout" @close="emit('close')" />
 </template>
 
 <script setup lang="ts">
 import AccountMenuContent from "@/components/header/AccountMenuContent.vue";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
-import type { CourseSession } from "@/types";
 
 const emit = defineEmits(["close"]);
 
 const logout = () => {
   userStore.handleLogout();
 };
-const selectCourseSession = (courseSession: CourseSession) => {
-  courseSessionsStore.switchCourseSessionById(courseSession.id);
-};
 
-const courseSessionsStore = useCourseSessionsStore();
 const userStore = useUserStore();
 </script>
diff --git a/client/src/components/header/AccountMenuContent.vue b/client/src/components/header/AccountMenuContent.vue
index 7f38ea98..f7a47b42 100644
--- a/client/src/components/header/AccountMenuContent.vue
+++ b/client/src/components/header/AccountMenuContent.vue
@@ -1,23 +1,14 @@
 <script setup lang="ts">
-import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
 import type { User } from "@/stores/user";
-import type { CourseSession } from "@/types";
-import { useRouteLookups } from "@/utils/route";
-import { computed } from "vue";
 import { useRouter } from "vue-router";
 
-const props = defineProps<{
-  courseSessions: CourseSession[];
+defineProps<{
   user: User;
-  selectedCourseSession?: string;
 }>();
 
-const emit = defineEmits(["selectCourseSession", "logout", "close"]);
+const emit = defineEmits(["logout", "close"]);
 
 const router = useRouter();
-const { inCourse } = useRouteLookups();
-
-const showCourseSessionMenu = computed(() => inCourse() && props.courseSessions.length);
 
 async function navigate(routeName: string) {
   await router.push({ name: routeName });
@@ -46,14 +37,6 @@ async function navigate(routeName: string) {
       </div>
     </div>
 
-    <div v-if="showCourseSessionMenu" class="border-b py-4">
-      <CourseSessionsMenu
-        :items="courseSessions"
-        :selected="selectedCourseSession"
-        @select="emit('selectCourseSession', $event)"
-      />
-    </div>
-
     <button
       type="button"
       class="mt-6 flex items-center"
diff --git a/client/src/components/header/CourseSessionNavigation.vue b/client/src/components/header/CourseSessionNavigation.vue
index e191e0f1..e2be0908 100644
--- a/client/src/components/header/CourseSessionNavigation.vue
+++ b/client/src/components/header/CourseSessionNavigation.vue
@@ -36,6 +36,7 @@ const mentorTabTitle = computed(() =>
     class="flex space-x-8 px-2 lg:px-10"
   >
     <SelectedCourseSession />
+
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"
diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
index 688e7c0e..1a838e8e 100644
--- a/client/src/components/header/SelectedCourseSession.vue
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -1,19 +1,63 @@
 <script setup lang="ts">
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import type { CourseSession } from "@/types";
 import { useNavigationAttributes } from "@/utils/navigation";
+import { useRouteLookups } from "@/utils/route";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { computed } from "vue";
+import CourseSessionsMenu from "./CourseSessionsMenu.vue";
 
+const { isInCourse } = useRouteLookups();
 const courseSessionsStore = useCourseSessionsStore();
 const { hasSessionTitle } = useNavigationAttributes();
 
 const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
+const selectedCourseSession = computed(() => {
+  return courseSessionsStore.currentCourseSession;
+});
+
+const selectCourseSession = (courseSession: CourseSession) => {
+  courseSessionsStore.switchCourseSessionById(courseSession.id);
+};
+
+const courseSessions = computed(() => {
+  return courseSessionsStore.allCourseSessions;
+});
+
+const showCourseSessionMenu = computed(
+  () => isInCourse.value && courseSessions.value.length
+);
 </script>
+
 <template>
-  <div v-if="hasSessionTitle" class="nav-item inline-flex items-center lg:inline-flex">
-    <div class="" data-cy="current-course-session-title">
+  <div
+    v-if="hasSessionTitle"
+    class="nav-item-base inline-flex items-center lg:inline-flex"
+  >
+    <div data-cy="current-course-session-title">
       {{ selectedCourseSessionTitle }}
     </div>
+
+    <Popover v-if="showCourseSessionMenu" class="relative">
+      <PopoverButton
+        class="group flex items-center rounded-md bg-transparent px-3 text-base focus:outline-none"
+      >
+        <it-icon-arrow-down class="h-6 w-6" />
+      </PopoverButton>
+      <PopoverPanel class="absolute left-0 z-10 mt-3 w-64 px-1 sm:px-0 lg:max-w-3xl">
+        <div
+          class="flex flex-col rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5"
+        >
+          <h3 class="fond-bold mb-2 text-base text-black">Durchführung</h3>
+          <CourseSessionsMenu
+            :items="courseSessions"
+            :selected="selectedCourseSession?.id"
+            @select="selectCourseSession"
+          />
+        </div>
+      </PopoverPanel>
+    </Popover>
   </div>
 </template>
diff --git a/client/tailwind.css b/client/tailwind.css
index 9e4d5e07..afd59494 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -176,8 +176,12 @@ textarea {
     @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
   }
 
+  .nav-item-base {
+    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white;
+  }
+
   .nav-item {
-    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
+    @apply nav-item-base hover:text-sky-500;
   }
 
   .nav-item-no-mobile {

From 3faf20ac07012ec4662fd0e0643d8edc0379e0fc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Nov 2024 16:50:27 +0100
Subject: [PATCH 16/17] Fix some issues mentioned in PR review

---
 client/src/components/header/HomeNavigation.vue        | 8 +++++---
 client/src/components/header/SelectedCourseSession.vue | 2 +-
 client/src/locales/de/translation.json                 | 2 ++
 client/src/locales/fr/translation.json                 | 2 ++
 client/src/locales/it/translation.json                 | 2 ++
 client/src/pages/competence/CompetenceParentPage.vue   | 1 +
 6 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/src/components/header/HomeNavigation.vue b/client/src/components/header/HomeNavigation.vue
index 868b911f..c47a99d3 100644
--- a/client/src/components/header/HomeNavigation.vue
+++ b/client/src/components/header/HomeNavigation.vue
@@ -9,10 +9,12 @@ const { t } = useTranslation();
 <template>
   <div class="flex flex-shrink-0 items-center">
     <template v-if="isInCourse">
-      <div class="flex items-center">
-        <router-link to="/" class="flex items-center border-r border-white pr-3">
+      <div class="flex h-full items-center border-r border-slate-500">
+        <router-link to="/" class="flex items-center pr-3">
           <it-icon-arrow-left />
-          <span class="hidden text-slate-500 lg:inline">Dashboard</span>
+          <span class="hidden text-slate-500 lg:inline">
+            {{ t("a.Dashboard") }}
+          </span>
         </router-link>
       </div>
     </template>
diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
index 1a838e8e..9f082564 100644
--- a/client/src/components/header/SelectedCourseSession.vue
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -36,7 +36,7 @@ const showCourseSessionMenu = computed(
     v-if="hasSessionTitle"
     class="nav-item-base inline-flex items-center lg:inline-flex"
   >
-    <div data-cy="current-course-session-title">
+    <div data-cy="current-course-session-title" class="text-bold">
       {{ selectedCourseSessionTitle }}
     </div>
 
diff --git a/client/src/locales/de/translation.json b/client/src/locales/de/translation.json
index 2b59d0a2..b6e8936d 100644
--- a/client/src/locales/de/translation.json
+++ b/client/src/locales/de/translation.json
@@ -70,6 +70,7 @@
   "a.Damit du myVBV nutzen kannst, brauchst du ein Konto.": "Damit du myVBV nutzen kannst, brauchst du ein Konto.",
   "a.Das muss ich nochmals anschauen": "Das muss ich nochmals anschauen",
   "a.Das wurde mit dir geteilt": "Das wurde mit dir geteilt",
+  "a.Dashboard": "Dashboard",
   "a.Datei auswählen": "Datei auswählen",
   "a.Datei hochladen": "Datei hochladen",
   "a.Datei kann nicht gespeichert werden.": "Datei kann nicht gespeichert werden.",
@@ -104,6 +105,7 @@
   "a.E-Mail Adresse": "E-Mail Adresse",
   "a.Einladung": "Einladung",
   "a.Einladung abschicken": "Einladung abschicken",
+  "a.Einstellungen": "Einstellungen",
   "a.Elemente zu erledigen": "Elemente zu erledigen",
   "a.Email": "Email",
   "a.Entfernen": "Entfernen",
diff --git a/client/src/locales/fr/translation.json b/client/src/locales/fr/translation.json
index 20556c94..872cdbc9 100644
--- a/client/src/locales/fr/translation.json
+++ b/client/src/locales/fr/translation.json
@@ -70,6 +70,7 @@
   "a.Damit du myVBV nutzen kannst, brauchst du ein Konto.": "Pour utiliser myVBV, vous devez créer un compte.",
   "a.Das muss ich nochmals anschauen": "Il faut que je regarde cela encore une fois de plus près",
   "a.Das wurde mit dir geteilt": "Cela a été partagé avec toi",
+  "a.Dashboard": "Dashboard",
   "a.Datei auswählen": "Sélectionner le fichier",
   "a.Datei hochladen": "Télécharger le fichier",
   "a.Datei kann nicht gespeichert werden.": "Impossible d'enregistrer le fichier.",
@@ -104,6 +105,7 @@
   "a.E-Mail Adresse": "Adresse e-mail",
   "a.Einladung": "Invitation",
   "a.Einladung abschicken": "Envoyer l'invitation",
+  "a.Einstellungen": "Paramètres",
   "a.Elemente zu erledigen": "Eléments à faire",
   "a.Email": "Email",
   "a.Entfernen": "Supprimer",
diff --git a/client/src/locales/it/translation.json b/client/src/locales/it/translation.json
index c1a205cd..c056d074 100644
--- a/client/src/locales/it/translation.json
+++ b/client/src/locales/it/translation.json
@@ -70,6 +70,7 @@
   "a.Damit du myVBV nutzen kannst, brauchst du ein Konto.": "Per utilizzare myVBV, hai bisogno di un account.",
   "a.Das muss ich nochmals anschauen": "Devo riguardarlo ancora una volta",
   "a.Das wurde mit dir geteilt": "Questo è stato condiviso con te",
+  "a.Dashboard": "Dashboard",
   "a.Datei auswählen": "Selezionare il file",
   "a.Datei hochladen": "Carica il file",
   "a.Datei kann nicht gespeichert werden.": "Impossibile salvare il file.",
@@ -104,6 +105,7 @@
   "a.E-Mail Adresse": "Indirizzo e-mail",
   "a.Einladung": "Invito",
   "a.Einladung abschicken": "Inviare l'invito",
+  "a.Einstellungen": "Impostazioni",
   "a.Elemente zu erledigen": "Elementi da completare",
   "a.Email": "E-mail",
   "a.Entfernen": "Rimuovere",
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 4bbfea32..8c13cb37 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -35,6 +35,7 @@ const competencesRoute = {
   name: COMPETENCES_ROUTE,
 };
 
+// todo: replace this menu with a real one before going live
 const items: SubNavEntry[] = [
   { id: 0, name: t("a.Übersicht"), route: competenceRoute },
   ...(currentCourseSession.value.course.configuration.enable_competence_certificates

From 028ff0502071b4d1402b08ec366bd301a3a0bcc2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Nov 2024 17:03:21 +0100
Subject: [PATCH 17/17] Add missing settings link

Resolves VBV-442 #complete
---
 .../components/header/AccountMenuContent.vue   | 16 +++++++++++++---
 client/src/components/header/MobileMenu.vue    | 18 ++++++++++++------
 client/src/router/index.ts                     |  2 ++
 client/src/router/names.ts                     |  1 +
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/client/src/components/header/AccountMenuContent.vue b/client/src/components/header/AccountMenuContent.vue
index f7a47b42..d06d16f7 100644
--- a/client/src/components/header/AccountMenuContent.vue
+++ b/client/src/components/header/AccountMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { SETTINGS_ROUTE } from "@/router/names";
 import type { User } from "@/stores/user";
 import { useRouter } from "vue-router";
 
@@ -14,10 +15,14 @@ async function navigate(routeName: string) {
   await router.push({ name: routeName });
   emit("close");
 }
+
+const settingsRoute = {
+  name: SETTINGS_ROUTE,
+};
 </script>
 
 <template>
-  <div class="text-black">
+  <div class="flex flex-col gap-4 text-black">
     <div class="border-b py-4">
       <div class="flex justify-start">
         <div v-if="user.avatar_url">
@@ -37,14 +42,19 @@ async function navigate(routeName: string) {
       </div>
     </div>
 
+    <router-link class="flex items-center gap-2" :to="settingsRoute">
+      <it-icon-settings />
+      {{ $t("a.Einstellungen") }}
+    </router-link>
+
     <button
       type="button"
-      class="mt-6 flex items-center"
+      class="flex items-center gap-2"
       data-cy="logout-button"
       @click="emit('logout')"
     >
       <it-icon-logout class="inline-block" />
-      <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
+      <span>{{ $t("mainNavigation.logout") }}</span>
     </button>
   </div>
 </template>
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 0e44f74c..5583d87e 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import { useVVByLink } from "@/composables";
+import { SETTINGS_ROUTE } from "@/router/names";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { User } from "@/stores/user";
 import type { CourseSession } from "@/types";
@@ -49,6 +50,10 @@ const mentorTabTitle = computed(() =>
     ? "a.Praxisbildner"
     : "a.Lernbegleitung"
 );
+
+const settingsRoute = {
+  name: SETTINGS_ROUTE,
+};
 </script>
 
 <template>
@@ -171,15 +176,16 @@ const mentorTabTitle = computed(() =>
               </li>
             </ul>
           </div>
-          <button
+          <router-link
+            :to="settingsRoute"
+            class="mt-6 flex w-full items-center gap-2 px-4 py-2"
+            active-class="bg-gray-200 text-blue-900 font-bold"
             v-if="user?.loggedIn"
             type="button"
-            class="mt-6 flex items-center px-4 py-2"
           >
-            <!-- todo: correct action / route -->
-            <it-icon-settings class="inline-block" />
-            <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
-          </button>
+            <it-icon-settings />
+            {{ $t("a.Einstellungen") }}
+          </router-link>
           <button
             v-if="user?.loggedIn"
             type="button"
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9e6af33f..a2118426 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -18,6 +18,7 @@ import {
   COMPETENCE_ROUTE,
   COMPETENCES_ROUTE,
   SELF_EVALUATION_ROUTE,
+  SETTINGS_ROUTE,
 } from "./names";
 
 const router = createRouter({
@@ -402,6 +403,7 @@ const router = createRouter({
     },
     {
       path: "/settings",
+      name: SETTINGS_ROUTE,
       component: () => import("@/pages/SettingsPage.vue"),
     },
     {
diff --git a/client/src/router/names.ts b/client/src/router/names.ts
index 8e41a5c0..a8f5d4f3 100644
--- a/client/src/router/names.ts
+++ b/client/src/router/names.ts
@@ -2,3 +2,4 @@ export const COMPETENCE_ROUTE = "competence";
 export const CERTIFICATES_ROUTE = "certificates";
 export const SELF_EVALUATION_ROUTE = "selfEvaluationAndFeedback";
 export const COMPETENCES_ROUTE = "competences";
+export const SETTINGS_ROUTE = "settings";