Merge pull request 'build rudimentary header, no sticky header yet and tailwind missing' (#58) from frontend/building-header-component into main

Reviewed-on: #58
Reviewed-by: Fargan von Pfargan Pfadfinder Tampon Tamplate <123@123.de>

frontend/src/App.vue

@@ -1,17 +1,26 @@
 <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>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+      <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
+        <template #left-icon>
+          <BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein-->
+        </template>
+      </HeaderNav>
     </header>
-  <MenuBar/>
-
+  </div>
   <RouterView />
 </template>
 
+
 <style scoped>
 
 </style>

frontend/src/components/HeaderNav.vue

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

@@ -1,75 +0,0 @@
-<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,6 +5,7 @@ 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'
@@ -18,5 +19,6 @@ app.use(PrimeVue, {
 })
 app.use(createPinia())
 app.use(router)
+app.directive('ripple', Ripple) 
 
 app.mount('#app')