Move mobile button

client/src/components/header/MainNavigationBar.vue

@@ -15,12 +15,7 @@ log.debug("MainNavigationBar created");
 
 const courseSessionsStore = useCourseSessionsStore();
 const { inMediaLibrary, inAppointments } = useRouteLookups();
-const { hasMediaLibraryMenu, hasAppointmentsMenu, hasSessionTitle } =
+const { hasMediaLibraryMenu, hasAppointmentsMenu } = useNavigationAttributes();
-  useNavigationAttributes();
-
-const selectedCourseSessionTitle = computed(() => {
-  return courseSessionsStore.currentCourseSession?.title;
-});
 
 const appointmentsUrl = computed(() => {
   const currentCourseSession = courseSessionsStore.currentCourseSession;
@@ -40,7 +35,6 @@ onMounted(() => {
   <nav class="bg-blue-900 text-white">
     <div class="mx-auto px-4 lg:px-8">
       <div class="relative flex h-16 justify-between">
-        <MobileMenuButton />
         <div class="flex flex-1 items-stretch justify-start">
           <HomeNavigation />
           <CourseSessionNavigation />
@@ -62,7 +56,7 @@ onMounted(() => {
             v-if="hasAppointmentsMenu"
             :to="appointmentsUrl"
             data-cy="all-duedates-link"
-            class="nav-item"
+            class="nav-item-no-mobile"
             :class="{ 'nav-item--active': inAppointments() }"
           >
             <it-icon-calendar-light class="h-8 w-8" />
@@ -71,22 +65,12 @@ onMounted(() => {
           <!-- Notification Bell & Menu -->
           <NotificationButton />
 
-          <div
-            v-if="hasSessionTitle"
-            class="nav-item hidden items-center lg:inline-flex"
-          >
-            <div class="" data-cy="current-course-session-title">
-              {{ selectedCourseSessionTitle }}
-            </div>
-          </div>
-
           <div class="nav-item">
             <ProfileMenuButton />
           </div>
         </div>
+        <MobileMenuButton />
       </div>
     </div>
   </nav>
 </template>
-
-<style lang="postcss"></style>

client/src/components/header/MobileMenuButton.vue

@@ -45,7 +45,7 @@ const showMenu = ref(false);
       @logout="userStore.handleLogout()"
     />
   </Teleport>
-  <div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
+  <div class="inset-y-0 flex items-center lg:hidden">
     <!-- Mobile menu button -->
     <div data-cy="navigation-mobile-menu-button" class="flex" @click="showMenu = true">
       <button

client/src/components/header/ProfileMenuButton.vue

@@ -29,7 +29,11 @@ function popoverClick(event: Event) {
       <AccountMenu @close="showMenu = false" />
     </ItFullScreenModal>
   </Teleport>
-  <div v-if="userStore.loggedIn" class="flex items-center" data-cy="header-profile">
+  <div
+    v-if="userStore.loggedIn"
+    class="hidden items-center lg:flex"
+    data-cy="header-profile"
+  >
     <Popover class="relative">
       <PopoverButton @click="popoverClick($event)">
         <div v-if="userStore.avatar_url">