From 2d440fd52c9efab1ca7f222eb5d7ebc7f725bafe Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Tue, 24 Sep 2024 15:27:52 +0200
Subject: [PATCH 1/2] Show close button on fullscreen pages

---
 client/src/App.vue                           |  2 +
 client/src/components/header/CloseButton.vue | 39 ++++++++++++++++++++
 client/src/router/index.ts                   |  8 ++++
 3 files changed, 49 insertions(+)
 create mode 100644 client/src/components/header/CloseButton.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 5cbafefb..764062e1 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="flex min-h-full flex-col">
     <MainNavigationBar v-if="!route.meta.hideChrome" class="flex-none" />
+    <CloseButton v-if="route.meta.showCloseButton" class="flex-none" />
     <RouterView v-slot="{ Component }" class="flex-auto">
       <Transition mode="out-in" name="app">
         <component :is="Component" :key="componentKey"></component>
@@ -20,6 +21,7 @@ import eventBus from "@/utils/eventBus";
 import { provideClient } from "@urql/vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import CloseButton from "./components/header/CloseButton.vue";
 
 const route = useRoute();
 
diff --git a/client/src/components/header/CloseButton.vue b/client/src/components/header/CloseButton.vue
new file mode 100644
index 00000000..167928a5
--- /dev/null
+++ b/client/src/components/header/CloseButton.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function navigateToVisibleChrome() {
+  const removeRoutes: string[] = [];
+
+  // Function to pop routes until `meta.hideChrome` is `false`
+  const findVisibleChromeRoute = () => {
+    const currentRoute = router.currentRoute.value;
+    if (currentRoute?.meta?.hideChrome) {
+      removeRoutes.push(currentRoute.fullPath || currentRoute.path);
+      router.back();
+    } else {
+      // Cleaning up stored routes when reached the target
+      if (removeRoutes.length) removeRoutes.length = 0;
+    }
+  };
+
+  // Watch the route change
+  router.afterEach((_to, from) => {
+    if (removeRoutes.includes(from.fullPath || from.path)) {
+      findVisibleChromeRoute();
+    }
+  });
+
+  // Start popping routes
+  findVisibleChromeRoute();
+}
+</script>
+
+<template>
+  <div class="flex justify-end">
+    <button type="button" class="p-3" @click="navigateToVisibleChrome()">
+      <it-icon-close class="size-7 text-black"></it-icon-close>
+    </button>
+  </div>
+</template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 69de2b9b..bd2126e5 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -178,6 +178,10 @@ const router = createRouter({
           component: () => import("@/pages/userProfile/LearningPathProfilePage.vue"),
           props: true,
           name: "profileLearningPath",
+          meta: {
+            hideChrome: true,
+            showCloseButton: true,
+          },
         },
         {
           path: "competence",
@@ -192,6 +196,10 @@ const router = createRouter({
                 import(
                   "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"
                 ),
+              meta: {
+                hideChrome: true,
+                showCloseButton: true,
+              },
             },
             {
               path: "evaluations",

From 60f0582a1dae5cd50ed00777a276145a0a2387f1 Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Tue, 1 Oct 2024 08:43:37 +0200
Subject: [PATCH 2/2] Fix selection of pages where chrome is not shown

---
 client/src/router/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index bd2126e5..291e1b53 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -188,6 +188,10 @@ const router = createRouter({
           component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
           props: true,
           name: "profileCompetence",
+          meta: {
+            hideChrome: true,
+            showCloseButton: true,
+          },
           children: [
             {
               path: "",
@@ -196,10 +200,6 @@ const router = createRouter({
                 import(
                   "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"
                 ),
-              meta: {
-                hideChrome: true,
-                showCloseButton: true,
-              },
             },
             {
               path: "evaluations",