style: menubalk klapt in als het scherm te klein wordt om alle componenten te tonen

frontend/src/components/MenuBar.vue

@@ -9,14 +9,10 @@
 
     const { t, locale } = useI18n();
 
-    // Instantiate variables to use in html to render right
-    // Links and content dependent on the role (student or teacher)
-    const path = "/user";
-
     const role = auth.authState.activeRole;
 
-    const name : string = auth.authState.user!.profile.name!;
+    const name: string = auth.authState.user!.profile.name!;
-    const initials : string = name
+    const initials: string = name
         .split(" ")
         .map((n) => n[0])
         .join("");
@@ -34,6 +30,8 @@
         console.log(langCode);
     };
 
+    const drawer = ref(false);
+
     // when the user wants to logout, the authentication must be set to False
     function performLogout() {
         auth.logout();
@@ -42,12 +40,85 @@
 
 <template>
     <main>
+        <v-app class="menu_collapsed">
+            <v-app-bar app style="background-color: #f6faf2;">
+                <template v-slot:prepend>
+                    <v-app-bar-nav-icon @click="drawer = !drawer" />
+                </template>
+
+                <v-app-bar-title>
+                    <router-link to="/user" class="dwengo_home">
+                        <img class="dwengo_logo" :src="dwengoLogo" style="width: 100px;" />
+                        <p class="caption" style="font-size: smaller;">{{ t(`${role}`) }}</p>
+                    </router-link>
+                </v-app-bar-title>
+
+                <v-spacer></v-spacer>
+
+                <v-menu open-on-hover>
+                            <template v-slot:activator="{ props }">
+                                <v-btn
+                                    v-bind="props"
+                                    icon
+                                    variant="text"
+                                >
+                                    <v-icon
+                                        icon="mdi-translate"
+                                        size="small"
+                                        color="#0e6942"
+                                    ></v-icon>
+                                </v-btn>
+                            </template>
+                            <v-list>
+                                <v-list-item
+                                    v-for="(language, index) in languages"
+                                    :key="index"
+                                    @click="changeLanguage(language.code)"
+                                >
+                                    <v-list-item-title>{{ language.name }}</v-list-item-title>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+
+                <v-btn @click="performLogout" text>
+                    <v-tooltip :text="t('logout')" location="bottom">
+                        <template v-slot:activator="{ props }">
+                            <v-icon v-bind="props" icon="mdi-logout" size="x-large" color="#0e6942" />
+                        </template>
+                    </v-tooltip>
+                </v-btn>
+            </v-app-bar>
+
+            <v-navigation-drawer v-model="drawer" app>
+                <v-list>
+
+                    <v-list-item to="/user/assignment" link>
+                        <v-list-item-content>
+                            <v-list-item-title>{{ t("assignments") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item to="/user/class" link>
+                        <v-list-item-content>
+                            <v-list-item-title>{{ t("classes") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item to="/user/discussion" link>
+                        <v-list-item-content>
+                            <v-list-item-title>{{ t("discussions") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+        </v-app>
+
         <nav class="menu">
             <div class="left">
                 <ul>
                     <li>
                         <router-link
-                            :to="`${path}`"
+                            to="/user"
                             class="dwengo_home"
                         >
                             <img
@@ -69,14 +140,14 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/class`"
+                            to="/user/class"
                             class="menu_item"
                             >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/discussion`"
+                            to="/user/discussion"
                             class="menu_item"
                             >{{ t("discussions") }}
                         </router-link>
@@ -111,7 +182,11 @@
             </div>
             <div class="right">
                 <li>
-                    <v-btn @click="performLogout" to="/login" style="background-color: transparent; box-shadow: none !important;">
+                    <v-btn
+                        @click="performLogout"
+                        to="/login"
+                        style="background-color: transparent; box-shadow: none !important"
+                    >
                         <v-tooltip
                             :text="t('logout')"
                             location="bottom"
@@ -192,4 +267,16 @@
     nav a.router-link-active {
         font-weight: bold;
     }
+
+    @media (max-width: 700px) {
+        .menu {
+            display: none;
+        }
+    }
+
+    @media (min-width: 701px) {
+        .menu_collapsed {
+            display: none;
+        }
+    }
 </style>