frontend/src/App.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import HeaderNav from './components/HeaderNav.vue'
-import SideBar from './components/SideBar.vue'
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router';
+import HeaderNav from './components/HeaderNav.vue';
+import { BoltIcon } from 'lucide-vue-next';  
 
-const isTeacher = ref(true)
-const isLoggedIn = ref(true)
+const isTeacher = true;
+const isLoggedIn = true;
 </script>
 
 <template>
-  <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 :isLoggedIn="isLoggedIn" :isTeacher="isTeacher" />
-  <div>
-    <RouterView />
+  <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>
 </template>
-
-<style scoped></style>

frontend/src/assets/main.css

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

frontend/src/components/ClassBar.vue

@@ -0,0 +1,68 @@
+<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,31 +1,26 @@
-<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-else>
+      <template v-if="isLoggedIn">
         <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>
@@ -34,17 +29,35 @@ defineProps<{
   </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 {
@@ -55,6 +68,7 @@ defineProps<{
   border: none;
   cursor: pointer;
   font-weight: bold;
+  color: white;
 }
 
 .icon {

frontend/src/components/SideBar.vue

@@ -1,50 +0,0 @@
-<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>