Hide Media Library navbar icon on mobile

client/src/components/header/MainNavigationBar.vue

@@ -139,7 +139,7 @@ onMounted(() => {
               <router-link
                 v-if="inCourse() && courseSessionsStore.currentCourseSession"
                 :to="courseSessionsStore.currentCourseSession.media_library_url"
-                class="nav-item"
+                class="nav-item-no-mobile"
                 :class="{ 'nav-item--active': inMediaLibrary() }"
               >
                 <it-icon-media-library class="h-8 w-8" />
@@ -215,6 +215,10 @@ onMounted(() => {
   @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
 }
 
+.nav-item-no-mobile {
+  @apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
+}
+
 .nav-item--active {
   @apply border-sky-500;
 }

client/src/components/header/MobileMenu.vue

@@ -62,6 +62,14 @@ const clickLink = (to: string | undefined) => {
                   {{ $t("cockpit.title") }}
                 </button>
               </li>
+              <li class="mt-6">
+                <button
+                  data-cy="medialibrary-link"
+                  @click="clickLink(`${courseSession?.media_library_url}`)"
+                >
+                  {{ $t("mediaLibrary.title") }}
+                </button>
+              </li>
             </ul>
           </div>
           <div class="mt-6 border-b pb-6">
@@ -75,11 +83,6 @@ const clickLink = (to: string | undefined) => {
                   Shop
                 </a>
               </li>
-              <li class="mt-6">
-                <button data-cy="medialibrary-link" @click="clickLink(mediaUrl)">
-                  {{ $t("mediaLibrary.title") }}
-                </button>
-              </li>
             </ul>
           </div>
           <button

client/src/utils/route.ts

@@ -23,7 +23,8 @@ export function useRouteLookups() {
   }
 
   function inMediaLibrary() {
-    return route.path.startsWith("/media/");
+    const regex = new RegExp("/course/[^/]+/media");
+    return regex.test(route.path);
   }
 
   return { inMediaLibrary, inCockpit, inLearningPath, inCompetenceProfile, inCourse };