From c6e21ca0595e38899ceb16baeafec56ff1d38dd7 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] 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,