Show close button on fullscreen pages

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();
 

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>

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",