frontend/src/components/SideBar.vue

@@ -1,26 +1,22 @@
 <script setup lang="ts">
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
-import { useClassStore } from '@/stores/classStore'
-import router from '@/router'
-
-const store = useClassStore()
-
-store.loadClasses()
 
 defineProps<{
   isLoggedIn: boolean
   isTeacher: boolean
 }>()
 
-var elements = store.classInfoList
+var elements = [
+  { name: 'Max', id: 25 },
+  { name: 'Anna', id: 30 },
+  { name: 'Tom', id: 35 },
+]
 var visible = ref(true)
 var closeIcon = ref(false)
+var counter = ref(null)
 
-function setClass(input: number) {
+function setClass(input: Number) {}
-  store.setActiveClass(input)
-  router.push({ name: 'about' })
-}
 </script>
 
 <template>
@@ -33,11 +29,10 @@ function setClass(input: number) {
     header="Sidebar"
     v-if="isLoggedIn"
   >
-    <h1 v-if="store.classInfo != null">{{ store.classInfo.name }}</h1>
     <div v-if="isTeacher">
       <ul>
         <li v-for="item in elements">
-          <p href="/about" @click="setClass(item.id)">{{ item.name }}</p>
+          <a href="/about" @click="setClass(item.id)">{{ item.name }}</a>
         </li>
       </ul>
     </div>

frontend/src/main.ts

@@ -1,5 +1,6 @@
 import './assets/main.css'
 
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
@@ -10,14 +11,13 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
-const pinia = createPinia()
 
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
   },
 })
-app.use(pinia)
+app.use(createPinia())
 app.use(router)
 app.directive('ripple', Ripple) 
 

frontend/src/stores/classStore.ts

@@ -1,39 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-interface State {
-  classInfoList: ClassInfo[]
-  classInfo: ClassInfo | null
-}
-
-export const useClassStore = defineStore('class', {
-  state: (): State => {
-    return {
-      classInfoList: [],
-      classInfo: null,
-    }
-  },
-  actions: {
-    loadClasses() {
-      /* Beispieldaten  */
-      if (this.classInfoList.length < 1) {
-        this.classInfoList.push({ name: 'Steve', id: 1 })
-        this.classInfoList.push({ name: 'Garett', id: 2 })
-        this.classInfoList.push({ name: 'Natalie', id: 3 })
-        this.classInfoList.push({ name: 'Henry', id: 4 })
-        this.classInfoList.push({ name: 'Dawn', id: 5 })
-      }
-    },
-    setActiveClass(id: number) {
-      this.classInfoList.map((item) => {
-        if (item.id == id) {
-          this.classInfo = item
-        }
-      })
-    },
-  },
-})
-
-interface ClassInfo {
-  name: string
-  id: number
-}

frontend/src/views/AboutView.vue

@@ -1,12 +1,15 @@
-<script setup lang="ts">
-import { useClassStore } from '@/stores/classStore'
-
-const store = useClassStore()
-</script>
 <template>
   <div class="about">
     <h1>This is an about page</h1>
   </div>
 </template>
 
-<style></style>
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>