added render conditions

frontend/src/App.vue

@@ -1,10 +1,11 @@
 <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'
 
-const isTeacher = false
-const isLoggedIn = true
+const isTeacher = ref(true)
+const isLoggedIn = ref(true)
 </script>
 
 <template>
@@ -18,7 +19,7 @@ const isLoggedIn = true
       </HeaderNav>
     </header>
   </div>
-  <SideBar />
+  <SideBar :isLoggedIn="isLoggedIn" :isTeacher="isTeacher" />
   <div>
     <RouterView />
   </div>

frontend/src/components/HeaderNav.vue

@@ -1,71 +1,64 @@
+<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"
-        >
-          <component :is="LogInIcon" class="icon" />
-          Login
+  <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>
-  
-        <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>
-  
+
+        <button v-if="isTeacher" class="nav-button">
+          <component :is="BoltIcon" class="icon" />
+          Lehrerverwaltung
+        </button>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<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/SideBar.vue

@@ -2,6 +2,11 @@
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
 
+defineProps<{
+  isLoggedIn: boolean
+  isTeacher: boolean
+}>()
+
 var elements = [
   { name: 'Max', id: 25 },
   { name: 'Anna', id: 30 },
@@ -9,9 +14,9 @@ var elements = [
 ]
 var visible = ref(true)
 var closeIcon = ref(false)
-var counter = ref(0)
+var counter = ref(null)
 
-function doShit(input: Number) {}
+function setClass(input: Number) {}
 </script>
 
 <template>
@@ -22,12 +27,22 @@ function doShit(input: Number) {}
     :dismissable="false"
     v-on:hide="visible = true"
     header="Sidebar"
+    v-if="isLoggedIn"
   >
-    <div>
-      <p>{{ counter }}</p>
+    <div v-if="isTeacher">
       <ul>
         <li v-for="item in elements">
-          <a href="/about" @click="doShit(item.id)">{{ item.name }}</a>
+          <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>