From 94f36e36c948ae759205b83d1e0f3adf1df0418d Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Fri, 28 Feb 2025 10:55:15 +0100
Subject: [PATCH] feat(frontend): menubar code opgekuist en stijl aangepast

---
 frontend/src/components/MenuBar.vue | 151 ++++++++++++++++------------
 1 file changed, 87 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 1d956ef0..f5da8863 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -1,80 +1,103 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import dwengo_logo from "../../../assets/img/dwengo-groen-zwart.svg";
+    import { computed } from "vue";
+    import { useRoute } from "vue-router";
+    import dwengo_logo from "../../../assets/img/dwengo-groen-zwart.svg";
 
-const route = useRoute();
-const teacher = computed(() => route.path.includes("teacher"));
-const id = computed(() => route.params.id as string);
+    const route = useRoute();
+
+    const isTeacher = route.path.includes("teacher");
+    const role = isTeacher ? "teacher" : "student";
+    const name = "Bob Debouwer"; // TODO: naam opvragen
+
+    const userId = computed(() => route.params.id as string);
 </script>
 
 <template>
-<main>
-  <div class="menu-bar">
-    <nav>
-      <ul>
-        <li class="img_with_text">
-          <router-link :to="`/student/${id}/home`">
-            <div>
-              <img :src="dwengo_logo"/>
-              <p class="caption"><span>{{ teacher ? "teacher" : "student" }}</span></p>
-            </div>
-          </router-link>
-        </li>
-        <li>
-          <router-link v-if="teacher" class="link" :to="`/teacher/${id}/assignment`">assignments</router-link>
-          <router-link v-else class="link" :to="`/student/${id}/assignment`">assignments</router-link>
-        </li>
-        <li>
-          <router-link v-if="teacher" class="link" :to="`/teacher/${id}/class`">classes</router-link>
-          <router-link v-else class="link" :to="`/student/${id}/class`">classes</router-link>
-        </li>
-        <li>
-          <router-link v-if="teacher" class="link" :to="`/teacher/${id}/discussion`">discussions</router-link>
-          <router-link v-else class="link" :to="`/student/${id}/discussion`">discussions</router-link>
-        </li>
-      </ul>
-    </nav>
-    <router-view />
-    </div>
-</main>
+    <main>
+        <nav class="menu">
+            <ul>
+                <li>
+                    <router-link
+                        :to="`/${role}/${userId}`"
+                        class="dwengo_home"
+                    >
+                        <img
+                            class="dwengo_logo"
+                            :src="dwengo_logo"
+                        />
+                        <p class="caption">
+                            {{ role }}
+                        </p>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link
+                        :to="`/${role}/${userId}/assignment`"
+                        class="menu_item"
+                    >
+                        assignments
+                    </router-link>
+                </li>
+                <li>
+                    <router-link
+                        :to="`/${role}/${userId}/class`"
+                        class="menu_item"
+                        >classes</router-link
+                    >
+                </li>
+                <li>
+                    <router-link
+                        :to="`/${role}/${userId}/discussion`"
+                        class="menu_item"
+                        >discussions</router-link
+                    >
+                </li>
+                <li>log out</li>
+                <li class="initials">initials</li>
+            </ul>
+        </nav>
+    </main>
 </template>
 
 <style scoped>
+    .menu {
+        background-color: #f6faf2;
+    }
 
-.menu-bar {
-  background: #F6FAF2;
-}
+    nav ul {
+        display: flex;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        gap: 10px;
+        align-items: center;
+    }
 
-nav ul {
-  display: flex;
-  list-style: none;
-  padding: 1%;
-  gap: 2%;
-}
+    li {
+        display: inline;
+        float: left;
+    }
 
-img {
-  max-width: 20%;
-  height: auto;
-}
+    .dwengo_home {
+        text-align: center;
+        text-decoration: none;
+    }
 
-.link {
-  color: #0E6942;
-}
+    .dwengo_logo {
+        width: 150px;
+    }
 
-nav a.router-link-active {
-  font-weight: bolder;
-}
-
-.img_with_text {
-    text-align: center;
-    display: block;
-}
-
-.caption {
-  color: black;
-  margin-top: -4%;
-}
+    .caption {
+        color: black;
+        margin-top: -25px;
+    }
 
+    .menu_item {
+        color: #0e6942;
+        text-decoration: none;
+    }
 
+    nav a.router-link-active {
+        font-weight: bold;
+    }
 </style>