frontend/src/App.vue

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

frontend/src/assets/main.css

@@ -20,3 +20,16 @@ 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,6 +1,7 @@
 <template>
     <nav class="header-container">
       <div class="left-icon">
+        <!-- Platzhalter für ein Icon -->
         <slot name="left-icon"></slot>
       </div>
       <div class="nav-items">
@@ -11,7 +12,8 @@
           <component :is="LogInIcon" class="icon" />
           Login
         </button>
-      <template v-if="isLoggedIn">
+  
+        <template v-else>
           <button class="nav-button">
             <component :is="LogOutIcon" class="icon" />
             Logout
@@ -27,40 +29,31 @@
         </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; 
-}
   
-.left-icon {
+  .nav-items {
-  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;
@@ -68,11 +61,11 @@ defineProps<{
     border: none;
     cursor: pointer;
     font-weight: bold;
-  color: white;
+  }
-}
   
-.icon {
+  .icon {
     width: 1rem;
     height: 1rem;
-}
+  }
-</style>
+  </style>
+