From 1f4d132b7ae402c65896291c67e908eb636eca1e Mon Sep 17 00:00:00 2001
From: Doulrion <dulrion.info@gmail.com>
Date: Mon, 7 Apr 2025 15:44:56 +0200
Subject: [PATCH 1/4] Added Drawer wthout working content

---
 frontend/src/App.vue                 | 10 ++--
 frontend/src/components/ClassBar.vue | 68 ----------------------------
 frontend/src/components/SideBar.vue  | 23 ++++++++++
 3 files changed, 27 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/src/components/ClassBar.vue
 create mode 100644 frontend/src/components/SideBar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 039e7ea..e892ba0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import MenuBar from './components/MenuBar.vue';
-import { RouterLink, RouterView } from 'vue-router';
+import SideBar from './components/SideBar.vue'
+import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
   </header>
-  <MenuBar/>
+  <SideBar />
 
   <RouterView />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/ClassBar.vue b/frontend/src/components/ClassBar.vue
deleted file mode 100644
index e77540e..0000000
--- a/frontend/src/components/ClassBar.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
new file mode 100644
index 0000000..41e57f0
--- /dev/null
+++ b/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>

From aaf3a9ed6aaafc9959870133edd9f5c43ac0e1a6 Mon Sep 17 00:00:00 2001
From: Doulrion <dulrion.info@gmail.com>
Date: Tue, 8 Apr 2025 12:40:20 +0200
Subject: [PATCH 2/4] Sidebar list

---
 frontend/src/components/SideBar.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 41e57f0..ede4f3f 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -10,13 +10,11 @@ var visible = ref(true)
   <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>
+        <ul>
+          <li v-for="item in elements">
+            <p>{{ item }}</p>
+          </li>
+        </ul>
       </div>
     </Drawer>
   </div>

From 08dbcf35355a84cba298334e36a08b7bb833d700 Mon Sep 17 00:00:00 2001
From: Jan Hoegerle <jan.hoegerle@gmail.com>
Date: Tue, 8 Apr 2025 16:19:18 +0200
Subject: [PATCH 3/4] Added content to Sidebar

---
 frontend/src/App.vue                |  9 ++++-----
 frontend/src/components/SideBar.vue | 29 +++++++++++++++++------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e892ba0..016c5e4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,12 +4,11 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-  </header>
-  <SideBar />
+  <div>
+    <SideBar />
 
-  <RouterView />
+    <RouterView />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index ede4f3f..bdab2cc 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -2,20 +2,25 @@
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
 
-var elements: ['Max', 'Anna', 'Tom']
+var elements = ['doulrion', 'Anna', 'Tom']
 var visible = ref(true)
+var closeIcon = ref(false)
 </script>
 
 <template>
-  <div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer">
-      <div>
-        <ul>
-          <li v-for="item in elements">
-            <p>{{ item }}</p>
-          </li>
-        </ul>
-      </div>
-    </Drawer>
-  </div>
+  <Drawer
+    v-model:visible="visible"
+    :showCloseIcon="closeIcon"
+    :modal="false"
+    :dismissable="false"
+    header=""
+  >
+    <div>
+      <ul>
+        <li v-for="item in elements">
+          <a url="twitch.tv/{{ item }}">{{ item }}</a>
+        </li>
+      </ul>
+    </div>
+  </Drawer>
 </template>

From b8255a3d969bfac81a61b450230bb68b10f314e6 Mon Sep 17 00:00:00 2001
From: Jan Hoegerle <jan.hoegerle@gmail.com>
Date: Tue, 8 Apr 2025 17:42:03 +0200
Subject: [PATCH 4/4] Optimized Styling added Dummy

---
 frontend/src/App.vue                |  3 +--
 frontend/src/assets/main.css        | 18 +-----------------
 frontend/src/components/SideBar.vue | 15 ++++++++++++---
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 016c5e4..d16dac6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,9 +4,8 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
+  <SideBar />
   <div>
-    <SideBar />
-
     <RouterView />
   </div>
 </template>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index ed04f51..ea89d8e 100644
--- a/frontend/src/assets/main.css
+++ b/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;
-  }
-}
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index bdab2cc..5bab416 100644
--- a/frontend/src/components/SideBar.vue
+++ b/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>