Merge pull request 'frontend/creating-a-sidebar' (#62) from frontend/creating-a-sidebar into main

Reviewed-on: #62
Reviewed-by: Dr_S_Eggs <mikailkilli@gmail.com>

frontend/src/App.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-import HeaderNav from './components/HeaderNav.vue';
-import { BoltIcon } from 'lucide-vue-next';  
+import { ref } from 'vue'
+import HeaderNav from './components/HeaderNav.vue'
+import SideBar from './components/SideBar.vue'
+import { RouterLink, RouterView } from 'vue-router'
 
-const isTeacher = true;
-const isLoggedIn = true;
+const isTeacher = ref(true)
+const isLoggedIn = ref(true)
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-black w-full">
-    <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
-      <template #left-icon>
-        <BoltIcon class="icon" />
-      </template>
-    </HeaderNav>
-  </header>
-  <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
-    <main class="flex-grow p-4">
-      <RouterView />
-    </main>
+  <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>
-</template>
+  <SideBar :isLoggedIn="isLoggedIn" :isTeacher="isTeacher" />
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<style scoped></style>

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,

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/HeaderNav.vue

@@ -1,26 +1,31 @@
+<script setup lang="ts">
+import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next'
+
+defineProps<{
+  isLoggedIn: boolean
+  isTeacher: boolean
+}>()
+</script>
+
 <template>
   <nav class="header-container">
     <div class="left-icon">
+      <!-- Platzhalter für ein Icon -->
       <slot name="left-icon"></slot>
     </div>
     <div class="nav-items">
-      <button
-        v-if="!isLoggedIn"
-        class="nav-button"
-      >
+      <button v-if="!isLoggedIn" class="nav-button">
         <component :is="LogInIcon" class="icon" />
         Login
       </button>
-      <template v-if="isLoggedIn">
+
+      <template v-else>
         <button class="nav-button">
           <component :is="LogOutIcon" class="icon" />
           Logout
         </button>
 
-        <button
-          v-if="isTeacher"
-          class="nav-button"
-        >
+        <button v-if="isTeacher" class="nav-button">
           <component :is="BoltIcon" class="icon" />
           Lehrerverwaltung
         </button>
@@ -29,35 +34,17 @@
   </nav>
 </template>
 
-<script setup lang="ts">
-import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next';
-
-defineProps<{
-  isLoggedIn: boolean;
-  isTeacher: boolean;
-}>();
-</script>
-
 <style scoped>
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  width: 100%; 
-  box-sizing: border-box; 
-}
-
-.left-icon {
-  display: flex;
-  align-items: center;
 }
 
 .nav-items {
   display: flex;
   gap: 1rem;
-  align-items: center;
-  margin-left: auto; 
 }
 
 .nav-button {
@@ -68,7 +55,6 @@ defineProps<{
   border: none;
   cursor: pointer;
   font-weight: bold;
-  color: white;
 }
 
 .icon {

frontend/src/components/SideBar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Drawer from 'primevue/drawer'
+import { ref } from 'vue'
+
+defineProps<{
+  isLoggedIn: boolean
+  isTeacher: boolean
+}>()
+
+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) {}
+</script>
+
+<template>
+  <Drawer
+    v-model:visible="visible"
+    :showCloseIcon="closeIcon"
+    :modal="false"
+    :dismissable="false"
+    v-on:hide="visible = true"
+    header="Sidebar"
+    v-if="isLoggedIn"
+  >
+    <div v-if="isTeacher">
+      <ul>
+        <li v-for="item in elements">
+          <a href="/about" @click="setClass(item.id)">{{ item.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <div v-else>
+      <ul>
+        <li>
+          <a href="/about">Offene/Abgegebene Evaluaionsbögen</a>
+        </li>
+        <li>
+          <a href="/about">Notenübersicht</a>
+        </li>
+      </ul>
+    </div>
+  </Drawer>
+</template>