Optimized Styling added Dummy

frontend/src/App.vue

@@ -18,9 +18,8 @@ const isLoggedIn = true
       </HeaderNav>
     </header>
   </div>
+  <SideBar />
   <div>
-    <SideBar />
-
     <RouterView />
   </div>
 </template>

frontend/src/assets/main.css

@@ -1,10 +1,7 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  margin-left: 325px;
 }
 
 a,
@@ -20,16 +17,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: start;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

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>