chaged the header and styling

frontend/src/App.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router';
 import HeaderNav from './components/HeaderNav.vue';
+import { BoltIcon } from 'lucide-vue-next';  
 
-const isTeacher = false
+const isTeacher = true;
-const isLoggedIn = true
+const isLoggedIn = true;
-
 </script>
 
 <template>
-    <div class="sticky top-0">
+  <header class="sticky top-0 z-50 bg-black w-full">
-    <header>
     <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
       <template #left-icon>
-          <BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein-->
+        <BoltIcon class="icon" />
       </template>
     </HeaderNav>
   </header>
-  </div>
+  <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

@@ -20,16 +20,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;
-  }
-}

frontend/src/components/HeaderNav.vue

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