Optimized Styling added Dummy

frontend/src/App.vue

@@ -9,17 +9,18 @@ const isLoggedIn = true
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-black w-full">
+  <div class="sticky top-0">
+    <header>
       <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
         <template #left-icon>
           <BoltIcon class="icon" />
+          <!--Hier dann ein richtiges Logo rein-->
         </template>
       </HeaderNav>
     </header>
+  </div>
   <SideBar />
-  <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
+  <div>
-    <main class="flex-grow p-4">
     <RouterView />
-    </main>
   </div>
 </template>

frontend/src/assets/main.css

@@ -1,10 +1,7 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  margin-left: 325px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
 }
 
 a,

frontend/src/components/SideBar.vue

@@ -2,9 +2,16 @@
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
 
-var elements = ['doulrion', 'Anna', 'Tom']
+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(0)
+
+function doShit(input: Number) {}
 </script>
 
 <template>
@@ -13,12 +20,14 @@ var closeIcon = ref(false)
     :showCloseIcon="closeIcon"
     :modal="false"
     :dismissable="false"
-    header=""
+    v-on:hide="visible = true"
+    header="Sidebar"
   >
     <div>
+      <p>{{ counter }}</p>
       <ul>
         <li v-for="item in elements">
-          <a url="twitch.tv/{{ item }}">{{ item }}</a>
+          <a href="/about" @click="doShit(item.id)">{{ item.name }}</a>
         </li>
       </ul>
     </div>