From 18616450cf92530fc0b9cdfd9a5ce7407c0c0803 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Tue, 25 Mar 2025 10:05:31 +0100
Subject: [PATCH] fix(frontend): Fouten door de merge van dev opgelost.

---
 frontend/src/App.vue                          |   6 +-
 frontend/src/components/MenuBar.vue           |  13 --
 frontend/src/router/index.ts                  |  33 ++--
 .../views/learning-paths/LearningPathPage.vue | 150 +++++++++---------
 4 files changed, 97 insertions(+), 105 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2dabe392..14e1178d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
     import auth from "@/services/auth/auth-service.ts";
-    import MenuBar from "@/components/MenuBar.vue";
     auth.loadUser();
 </script>
 
 <template>
     <v-app>
-        <menu-bar></menu-bar>
-        <v-main>
-            <router-view />
-        </v-main>
+        <router-view />
     </v-app>
 </template>
 
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index ed80d7c2..b456429c 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -296,7 +296,6 @@
                 </li>
             </div>
         </nav>
-        <router-view />
     </main>
 </template>
 
@@ -352,16 +351,4 @@
     nav a.router-link-active {
         font-weight: bold;
     }
-
-    @media (max-width: 700px) {
-        .menu {
-            display: none;
-        }
-    }
-
-    @media (min-width: 701px) {
-        .menu_collapsed {
-            display: none;
-        }
-    }
 </style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 810764b5..a4a64f35 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -110,23 +110,30 @@ const router = createRouter({
             meta: { requiresAuth: true },
         },
         {
-           path: "/learningPath/search",
-           name: "LearningPathSearchPage",
-           component: LearningPathSearchPage,
-           meta: { requiresAuth: false }
-        },
-        {
-            path: "/learningPath/:hruid/:language",
-            name: "LearningPath",
-            component: LearningPathPage,
-            props: true,
-            meta: { requiresAuth: false },
+            path: "/learningPath",
+            component: MenuBar,
             children: [
                 {
-                    path: ":learningObjectHruid",
+                    path: "/search",
+                    name: "LearningPathSearchPage",
+                    component: LearningPathSearchPage,
+                    meta: { requiresAuth: true }
+                },
+                {
+                    path: "/:hruid/:language",
+                    name: "LearningPath",
                     component: LearningPathPage,
                     props: true,
-                }
+                    meta: { requiresAuth: true },
+                    children: [
+                        {
+                            path: ":learningObjectHruid",
+                            component: LearningPathPage,
+                            props: true,
+                            meta: { requiresAuth: true }
+                        }
+                    ]
+                },
             ]
         },
         {
diff --git a/frontend/src/views/learning-paths/LearningPathPage.vue b/frontend/src/views/learning-paths/LearningPathPage.vue
index 2a17b544..65c1ef4d 100644
--- a/frontend/src/views/learning-paths/LearningPathPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathPage.vue
@@ -123,84 +123,86 @@
 </script>
 
 <template>
-    <using-remote-resource
-        :resource="learningPathResource"
-        v-slot="learningPath: {data: LearningPath}"
-    >
-        <v-navigation-drawer v-model="navigationDrawerShown">
-            <v-list-item
-                :title="learningPath.data.title"
-                :subtitle="learningPath.data.description"
-            ></v-list-item>
-            <v-list-item>
-                <template v-slot:subtitle>
-                    <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
-                    <p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
-                    <p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
-                </template>
-            </v-list-item>
-            <v-divider></v-divider>
+    <v-main>
+        <using-remote-resource
+            :resource="learningPathResource"
+            v-slot="learningPath: {data: LearningPath}"
+        >
+            <v-navigation-drawer v-model="navigationDrawerShown">
+                <v-list-item
+                    :title="learningPath.data.title"
+                    :subtitle="learningPath.data.description"
+                ></v-list-item>
+                <v-list-item>
+                    <template v-slot:subtitle>
+                        <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
+                        <p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
+                        <p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
+                    </template>
+                </v-list-item>
+                <v-divider></v-divider>
 
-            <div v-if="props.learningObjectHruid">
-                <using-remote-resource
-                    :resource="learningObjectListResource"
-                    v-slot="learningObjects: {data: LearningObject[]}"
-                >
-                    <v-list-item
-                        link
-                        :to="{path: node.key, query: route.query}"
-                        :title="node.title"
-                        :active="node.key === props.learningObjectHruid"
-                        v-for="node in learningObjects.data"
+                <div v-if="props.learningObjectHruid">
+                    <using-remote-resource
+                        :resource="learningObjectListResource"
+                        v-slot="learningObjects: {data: LearningObject[]}"
                     >
-                        <template v-slot:prepend>
-                            <v-icon
-                                :color="COLORS[getNavItemState(node)]"
-                                :icon="ICONS[getNavItemState(node)]"></v-icon>
-                        </template>
-                        <template v-slot:append>
-                            {{ node.estimatedTime }}'
-                        </template>
-                    </v-list-item>
-                </using-remote-resource>
+                        <v-list-item
+                            link
+                            :to="{path: node.key, query: route.query}"
+                            :title="node.title"
+                            :active="node.key === props.learningObjectHruid"
+                            v-for="node in learningObjects.data"
+                        >
+                            <template v-slot:prepend>
+                                <v-icon
+                                    :color="COLORS[getNavItemState(node)]"
+                                    :icon="ICONS[getNavItemState(node)]"></v-icon>
+                            </template>
+                            <template v-slot:append>
+                                {{ node.estimatedTime }}'
+                            </template>
+                        </v-list-item>
+                    </using-remote-resource>
+                </div>
+            </v-navigation-drawer>
+            <div class="control-bar-above-content">
+                <v-btn
+                    :icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
+                    class="navigation-drawer-toggle-button"
+                    variant="plain"
+                    @click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
+                <div class="search-field-container">
+                    <learning-path-search-field></learning-path-search-field>
+                </div>
             </div>
-        </v-navigation-drawer>
-        <div class="control-bar-above-content">
-            <v-btn
-                :icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
-                class="navigation-drawer-toggle-button"
-                variant="plain"
-                @click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
-            <div class="search-field-container">
-                <learning-path-search-field></learning-path-search-field>
-            </div>
-        </div>
 
-        <learning-object-view
-            :hruid="currentNode.learningobjectHruid"
-            :language="currentNode.language"
-            :version="currentNode.version"
-            v-if="currentNode"
-        ></learning-object-view>
-        <div class="navigation-buttons-container">
-            <v-btn
-                prepend-icon="mdi-chevron-left"
-                variant="text"
-                :disabled="!previousNode"
-                :to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
-            >
-                {{ t("previous") }}
-            </v-btn>
-            <v-btn
-                append-icon="mdi-chevron-right"
-                variant="text"
-                :disabled="!nextNode"
-                :to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
-            >
-                {{ t("next") }}
-            </v-btn>
-        </div>
-    </using-remote-resource>
+            <learning-object-view
+                :hruid="currentNode.learningobjectHruid"
+                :language="currentNode.language"
+                :version="currentNode.version"
+                v-if="currentNode"
+            ></learning-object-view>
+            <div class="navigation-buttons-container">
+                <v-btn
+                    prepend-icon="mdi-chevron-left"
+                    variant="text"
+                    :disabled="!previousNode"
+                    :to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
+                >
+                    {{ t("previous") }}
+                </v-btn>
+                <v-btn
+                    append-icon="mdi-chevron-right"
+                    variant="text"
+                    :disabled="!nextNode"
+                    :to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
+                >
+                    {{ t("next") }}
+                </v-btn>
+            </div>
+        </using-remote-resource>
+    </v-main>
 </template>
 
 <style scoped>