frontend/src/App.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-import HeaderNav from './components/HeaderNav.vue';
-import { BoltIcon } from 'lucide-vue-next';  
+import { RouterLink, RouterView } from 'vue-router'
+import HeaderNav from './components/HeaderNav.vue'
+import SideBar from './components/SideBar.vue'
+import { BoltIcon } from 'lucide-vue-next'
 
-const isTeacher = true;
-const isLoggedIn = true;
+const isTeacher = true
+const isLoggedIn = true
 </script>
 
 <template>
@@ -15,6 +16,7 @@ const isLoggedIn = true;
       </template>
     </HeaderNav>
   </header>
+  <SideBar />
   <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
     <main class="flex-grow p-4">
       <RouterView />

frontend/src/components/ClassBar.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import TieredMenu from 'primevue/tieredmenu';
-
-
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'HomeViw',
-        //icon: 'pi pi-home',
-        route: '/'
-    },
-    {
-        label: 'Student',
-        //icon: 'pi pi-graduation-cap',
-        route: '/Student'
-    },
-    {
-        label: 'Programmatic',
-        //icon: 'pi pi-link'
-        command: () => {
-            router.push('/introduction');
-        }
-    },
-    {
-        label: 'External',
-        //icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                url: 'https://vuejs.org/'
-            }
-        ]
-    }
-]);
-</script>
-
-
-<template>
-  <main>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <!--span class="ml-2">{{ item.label }}</span-->
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <!--span :class="item.icon" /-->
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-
-
-  </main>
-</template>

frontend/src/components/SideBar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Drawer from 'primevue/drawer'
+import { ref } from 'vue'
+
+var elements: ['Max', 'Anna', 'Tom']
+var visible = ref(true)
+</script>
+
+<template>
+  <div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer">
+      <div>
+        <table>
+          <tbody>
+            <tr v-for="(element, index) in elements" :key="index">
+              <td color="white">{{ element }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Drawer>
+  </div>
+</template>