frontend/src/App.vue

@@ -1,26 +1,17 @@
 <script setup lang="ts">
+import MenuBar from './components/MenuBar.vue';
 import { RouterLink, RouterView } from 'vue-router';
-import HeaderNav from './components/HeaderNav.vue';
-
-const isTeacher = false
-const isLoggedIn = true
-
 </script>
 
 <template>
-    <div class="sticky top-0">
+  <header>
-    <header>
+    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-      <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
+  </header>
-        <template #left-icon>
+  <MenuBar/>
-          <BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein-->
+
-        </template>
-      </HeaderNav>
-    </header>
-  </div>
   <RouterView />
 </template>
 
-
 <style scoped>
 
 </style>

frontend/src/components/HeaderNav.vue

@@ -1,71 +0,0 @@
-<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"
-        >
-          <component :is="LogInIcon" class="icon" />
-          Login
-        </button>
-  
-        <template v-else>
-          <button class="nav-button">
-            <component :is="LogOutIcon" class="icon" />
-            Logout
-          </button>
-  
-          <button
-            v-if="isTeacher"
-            class="nav-button"
-          >
-            <component :is="BoltIcon" class="icon" />
-            Lehrerverwaltung
-          </button>
-        </template>
-      </div>
-    </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;
-  }
-  
-  .nav-items {
-    display: flex;
-    gap: 1rem;
-  }
-  
-  .nav-button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-weight: bold;
-  }
-  
-  .icon {
-    width: 1rem;
-    height: 1rem;
-  }
-  </style>
-  

frontend/src/components/MenuBar.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="card">
+        <Menubar :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>{{ 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> n/A {{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import Menubar from 'primevue/menubar';
+
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home',
+        route: '/'
+    },
+    {
+        label: 'Student',
+        icon: 'pi pi-graduation-cap',
+        route: '/Student'
+    },
+    {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        items: [
+            {
+                label: 'Components',
+                icon: 'pi pi-bolt'
+            },
+            {
+                label: 'Blocks',
+                icon: 'pi pi-server'
+            },
+            {
+                label: 'UI Kit',
+                icon: 'pi pi-pencil'
+            },
+            {
+                label: 'Templates',
+                icon: 'pi pi-palette',
+                items: [
+                    {
+                        label: 'Apollo',
+                        icon: 'pi pi-palette'
+                    },
+                    {
+                        label: 'Ultima',
+                        icon: 'pi pi-palette'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Contact',
+        icon: 'pi pi-envelope'
+    }
+]);
+</script>

frontend/src/main.ts

@@ -5,7 +5,6 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
-import Ripple from 'primevue/ripple'
 
 import App from './App.vue'
 import router from './router'
@@ -19,6 +18,5 @@ app.use(PrimeVue, {
 })
 app.use(createPinia())
 app.use(router)
-app.directive('ripple', Ripple) 
 
 app.mount('#app')