Update CourseSessionsMenu

client/src/components/header/AccountMenuContent.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
 
 const props = defineProps<{
   courseSessions: CourseSession[];
-  user: UserState | undefined;
+  user: UserState;
+  selectedCourseSession?: number;
 }>();
 
 const emit = defineEmits(["selectCourseSession", "logout"]);
@@ -12,18 +14,18 @@ const emit = defineEmits(["selectCourseSession", "logout"]);
 
 <template>
   <div class="text-black">
-    <div v-if="user?.loggedIn" class="border-b py-4">
+    <div class="border-b py-4">
       <div class="flex justify-start">
-        <div v-if="user?.avatar_url">
+        <div v-if="user.avatar_url">
           <img
             class="inline-block h-20 w-20 rounded-full"
-            :src="user?.avatar_url"
+            :src="user.avatar_url"
             alt=""
           />
         </div>
         <div class="ml-6">
-          <h3>{{ user?.first_name }} {{ user?.last_name }}</h3>
-          <div class="text-sm text-gray-800">{{ user?.email }}</div>
+          <h3>{{ user.first_name }} {{ user.last_name }}</h3>
+          <div class="text-sm text-gray-800">{{ user.email }}</div>
           <div class="text-sm text-gray-800">
             <router-link class="link" to="/profile">Profil anzeigen</router-link>
           </div>
@@ -32,17 +34,14 @@ const emit = defineEmits(["selectCourseSession", "logout"]);
     </div>
 
     <div v-if="props.courseSessions.length" class="border-b py-4">
-      <div v-for="cs in props.courseSessions" :key="cs.id">
-        <button @click="emit('selectCourseSession', cs)">{{ cs.title }}</button>
-      </div>
+      <CourseSessionsMenu
+        :items="courseSessions"
+        :selected="selectedCourseSession"
+        @select="emit('selectCourseSession', $event)"
+      />
     </div>
 
-    <button
-      v-if="user?.loggedIn"
-      type="button"
-      class="mt-6 flex items-center"
-      @click="emit('logout')"
-    >
+    <button type="button" class="mt-6 flex items-center" @click="emit('logout')">
       <it-icon-logout class="inline-block" />
       <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
     </button>

client/src/components/header/CourseSessionsMenu.vue

@@ -1,18 +1,22 @@
 <template>
   <fieldset>
     <div>
-      {{selected}}
-      <div v-for="item in props.items" :key="item.id" class="mb-4 flex items-center">
+      <div
+        v-for="item in props.items"
+        :key="item.id"
+        class="mb-4 flex items-center last:mb-0"
+      >
         <input
-          :id="item.id"
+          :id="String(item.id)"
           name="coursesessions"
           type="radio"
           :value="item.id"
-          v-model="selected"
-          class="text-indigo-600 focus:ring-indigo-600 h-4 w-4 border-gray-300"
+          :checked="selected === item.id"
+          class="focus:ring-indigo-900 h-4 w-4 border-gray-300 text-blue-900"
+          @change="emit('select', item)"
         />
         <label
-          :for="item.id"
+          :for="String(item.id)"
           class="ml-3 block text-sm font-medium leading-6 text-gray-900"
         >
           {{ item.title }}
@@ -23,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import type { CourseSession } from "@/types";
 
 export interface Item {
   id: string;
@@ -31,9 +35,10 @@ export interface Item {
 }
 
 export interface Props {
-  items: Item[];
+  items: CourseSession[];
+  selected?: number;
 }
 
-const selected = ref(null);
 const props = defineProps<Props>();
+const emit = defineEmits(["select"]);
 </script>

client/src/components/header/MainNavigationBar.vue

@@ -219,6 +219,9 @@ onMounted(() => {
                       <div class="p-4">
                         <AccountMenuContent
                           :course-sessions="courseSessionsStore.currentCourseSessions"
+                          :selected-course-session="
+                            courseSessionsStore.currentCourseSession.id
+                          "
                           :user="userStore"
                           @logout="logout"
                           @select-course-session="selectCourseSession"