Move course session switcher to top navigation

client/src/components/header/AccountMenu.vue

@@ -1,29 +1,16 @@
 <template>
-  <AccountMenuContent
-    :course-sessions="courseSessionsStore.allCurrentCourseSessions"
-    :selected-course-session="courseSessionsStore.currentCourseSession?.id"
-    :user="userStore"
-    @logout="logout"
-    @select-course-session="selectCourseSession"
-    @close="emit('close')"
-  />
+  <AccountMenuContent :user="userStore" @logout="logout" @close="emit('close')" />
 </template>
 
 <script setup lang="ts">
 import AccountMenuContent from "@/components/header/AccountMenuContent.vue";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
-import type { CourseSession } from "@/types";
 
 const emit = defineEmits(["close"]);
 
 const logout = () => {
   userStore.handleLogout();
 };
-const selectCourseSession = (courseSession: CourseSession) => {
-  courseSessionsStore.switchCourseSessionById(courseSession.id);
-};
 
-const courseSessionsStore = useCourseSessionsStore();
 const userStore = useUserStore();
 </script>

client/src/components/header/AccountMenuContent.vue

@@ -1,23 +1,14 @@
 <script setup lang="ts">
-import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
 import type { User } from "@/stores/user";
-import type { CourseSession } from "@/types";
-import { useRouteLookups } from "@/utils/route";
-import { computed } from "vue";
 import { useRouter } from "vue-router";
 
-const props = defineProps<{
-  courseSessions: CourseSession[];
+defineProps<{
   user: User;
-  selectedCourseSession?: string;
 }>();
 
-const emit = defineEmits(["selectCourseSession", "logout", "close"]);
+const emit = defineEmits(["logout", "close"]);
 
 const router = useRouter();
-const { inCourse } = useRouteLookups();
-
-const showCourseSessionMenu = computed(() => inCourse() && props.courseSessions.length);
 
 async function navigate(routeName: string) {
   await router.push({ name: routeName });
@@ -46,14 +37,6 @@ async function navigate(routeName: string) {
       </div>
     </div>
 
-    <div v-if="showCourseSessionMenu" class="border-b py-4">
-      <CourseSessionsMenu
-        :items="courseSessions"
-        :selected="selectedCourseSession"
-        @select="emit('selectCourseSession', $event)"
-      />
-    </div>
-
     <button
       type="button"
       class="mt-6 flex items-center"

client/src/components/header/CourseSessionNavigation.vue

@@ -36,6 +36,7 @@ const mentorTabTitle = computed(() =>
     class="flex space-x-8 px-2 lg:px-10"
   >
     <SelectedCourseSession />
+
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"

client/src/components/header/SelectedCourseSession.vue

@@ -1,19 +1,63 @@
 <script setup lang="ts">
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import type { CourseSession } from "@/types";
 import { useNavigationAttributes } from "@/utils/navigation";
+import { useRouteLookups } from "@/utils/route";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { computed } from "vue";
+import CourseSessionsMenu from "./CourseSessionsMenu.vue";
 
+const { isInCourse } = useRouteLookups();
 const courseSessionsStore = useCourseSessionsStore();
 const { hasSessionTitle } = useNavigationAttributes();
 
 const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
+const selectedCourseSession = computed(() => {
+  return courseSessionsStore.currentCourseSession;
+});
+
+const selectCourseSession = (courseSession: CourseSession) => {
+  courseSessionsStore.switchCourseSessionById(courseSession.id);
+};
+
+const courseSessions = computed(() => {
+  return courseSessionsStore.allCourseSessions;
+});
+
+const showCourseSessionMenu = computed(
+  () => isInCourse.value && courseSessions.value.length
+);
 </script>
+
 <template>
-  <div v-if="hasSessionTitle" class="nav-item inline-flex items-center lg:inline-flex">
-    <div class="" data-cy="current-course-session-title">
+  <div
+    v-if="hasSessionTitle"
+    class="nav-item-base inline-flex items-center lg:inline-flex"
+  >
+    <div data-cy="current-course-session-title">
       {{ selectedCourseSessionTitle }}
     </div>
+
+    <Popover v-if="showCourseSessionMenu" class="relative">
+      <PopoverButton
+        class="group flex items-center rounded-md bg-transparent px-3 text-base focus:outline-none"
+      >
+        <it-icon-arrow-down class="h-6 w-6" />
+      </PopoverButton>
+      <PopoverPanel class="absolute left-0 z-10 mt-3 w-64 px-1 sm:px-0 lg:max-w-3xl">
+        <div
+          class="flex flex-col rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5"
+        >
+          <h3 class="fond-bold mb-2 text-base text-black">Durchführung</h3>
+          <CourseSessionsMenu
+            :items="courseSessions"
+            :selected="selectedCourseSession?.id"
+            @select="selectCourseSession"
+          />
+        </div>
+      </PopoverPanel>
+    </Popover>
   </div>
 </template>

client/tailwind.css

@@ -176,8 +176,12 @@ textarea {
     @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
   }
 
+  .nav-item-base {
+    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white;
+  }
+
   .nav-item {
-    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
+    @apply nav-item-base hover:text-sky-500;
   }
 
   .nav-item-no-mobile {