Fix mobile navigation and minor mobile problems

client/src/components/header/MobileMenu.vue

@@ -3,6 +3,7 @@ import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
 import { useRouter } from "vue-router";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 
 const router = useRouter();
 
@@ -21,6 +22,8 @@ const clickLink = (to: string | undefined) => {
     emit("closemodal");
   }
 };
+
+const courseSessionsStore = useCourseSessionsStore();
 </script>
 
 <template>
@@ -49,20 +52,38 @@ const clickLink = (to: string | undefined) => {
           </div>
         </div>
         <div>
-          <div v-if="courseSession" class="mt-6 border-b pb-6">
+          <div v-if="courseSession" class="mt-6 border-b">
             <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
             <ul class="mt-6">
-              <li>
+              <li
-                <button @click="clickLink(courseSession?.learning_path_url)">
+                v-if="courseSessionsStore.currentCourseSessionHasCockpit"
-                  {{ $t("general.learningPath") }}
+                class="mb-6"
-                </button>
+              >
-              </li>
-              <li class="mt-6">
                 <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
                   {{ $t("cockpit.title") }}
                 </button>
               </li>
-              <li class="mt-6">
+              <li class="mb-6">
+                <button @click="clickLink(courseSession?.learning_path_url)">
+                  {{ $t("general.learningPath") }}
+                </button>
+              </li>
+              <li class="mb-6">
+                <button
+                  @click="
+                    clickLink(
+                      courseSession?.competence_url.replace(
+                        // TODO: remove the `competence_url` with url to Navi...
+                        '/competences',
+                        ''
+                      )
+                    )
+                  "
+                >
+                  {{ $t("competences.title") }}
+                </button>
+              </li>
+              <li class="mb-6">
                 <button
                   data-cy="medialibrary-link"
                   @click="clickLink(`${courseSession?.media_library_url}`)"
@@ -72,16 +93,12 @@ const clickLink = (to: string | undefined) => {
               </li>
             </ul>
           </div>
-          <div class="mt-6 border-b pb-6">
+          <div class="mt-6 border-b">
             <ul>
-              <li>
+              <li class="mb-6">
-                <a
+                <button data-cy="medialibrary-link" @click="clickLink('/')">
-                  class="nav-item"
+                  myVBV
-                  target="_blank"
+                </button>
-                  href="https://bildung.vbv.ch/ilp/pages/catalogsearch.jsf"
-                >
-                  Shop
-                </a>
               </li>
             </ul>
           </div>

client/src/pages/competence/ActionCompetenceListPage.vue

@@ -28,7 +28,7 @@ function toggleOpen() {
       <div class="text-xl lg:w-3/4">
         {{ $t("competence.listPageDescription") }}
       </div>
-      <div class="whitespace-nowrap">
+      <div class="lg:whitespace-nowrap">
         <button class="link" @click="toggleOpen()">
           <span v-if="isOpenAll">
             {{ $t("a.Alle zuklappen") }}

client/src/pages/competence/CompetenceAssignmentRow.vue

@@ -28,7 +28,7 @@ const getIconName = () => {
     :data-cy="`assignment-${assignment.slug}`"
   >
     <component :is="getIconName()" class="mr-4 hidden h-9 w-9 lg:block"></component>
-    <div class="flex w-[420px] flex-col">
+    <div class="flex flex-col lg:w-[420px]">
       <h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
       <p class="text-gray-800">
         <a

client/src/pages/competence/CompetenceIndexPage.vue

@@ -139,7 +139,7 @@ const performanceCriteriaStatusCount = computed(() => {
         class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
       >
         <li
-          class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
+          class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:border-r lg:pb-0"
         >
           <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
           <div class="flex flex-row items-center">
@@ -153,7 +153,7 @@ const performanceCriteriaStatusCount = computed(() => {
           </div>
         </li>
         <li
-          class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
+          class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:border-r lg:pb-0"
         >
           <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
           <div class="flex flex-row items-center">
@@ -166,7 +166,7 @@ const performanceCriteriaStatusCount = computed(() => {
             </p>
           </div>
         </li>
-        <li class="w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:pb-0">
+        <li class="flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:pb-0">
           <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>

client/src/pages/competence/SinglePerformanceCriteriaRow.vue

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
         {{ criteria.title }}
       </div>
     </div>
-    <span class="whitespace-nowrap">
+    <span class="lg:whitespace-nowrap">
       <router-link
         v-if="props.showAssessAgain"
         class="link"