Add new icons

client/src/components/MainNavigationBar.vue

@@ -125,7 +125,15 @@ const profileDropdownData: DropdownListItem[] = [
                 class="nav-item flex flex-row items-center"
                 data-cy="messages-link"
               >
-                <it-icon-message class="w-8 h-8 mr-6" />
+                <it-icon-bell class="w-6 h-6 mr-6" />
+              </router-link>
+              <router-link
+                v-if="userStore.loggedIn"
+                to="/messages"
+                class="nav-item flex flex-row items-center"
+                data-cy="messages-link"
+              >
+                <it-icon-persons class="w-6 h-6 mr-6" />
               </router-link>
               <!-- Mobile menu button -->
               <div class="flex" @click="toggleNav">
@@ -184,7 +192,14 @@ const profileDropdownData: DropdownListItem[] = [
               class="nav-item flex flex-row items-center"
               data-cy="messages-link"
             >
-              <it-icon-message class="w-8 h-8 mr-6" />
+              <it-icon-bell class="w-6 h-6 mr-6" />
+            </router-link>
+            <router-link
+              to="/messages"
+              class="nav-item flex flex-row items-center"
+              data-cy="messages-link"
+            >
+              <it-icon-persons class="w-6 h-6 mr-6" />
             </router-link>
             <div v-if="userStore.loggedIn" class="nav-item flex items-center">
               <ItDropdown

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -77,7 +77,7 @@ function updateActiveState(status: CourseCompletionStatus) {
     </div>
     <div class="bg-white p-8">
       <div
-        class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block"
+        class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block justify-between"
       >
         <button
           v-for="item in mobileMenuItems"
@@ -86,11 +86,13 @@ function updateActiveState(status: CourseCompletionStatus) {
             'bg-gray-200': activeMenuItem.id === item.id,
             'mr-6': item.id !== 'unknown',
           }"
-          class="flex flex-row items-center py-4 px-2 mr-6"
+          class="py-4 px-2 mr-6 inline-block"
           @click="updateActiveState(item.id)"
         >
-          <span class="inline-block mr-2">{{ item.name }}</span>
+          <div class="flex flex-row items-center">
-          <component :is="item.iconName"></component>
+            <span class="inline-block mr-2">{{ item.name }}</span>
+            <component :is="item.iconName"></component>
+          </div>
         </button>
       </div>
       <ul class="mb-6">

server/vbv_lernwelt/static/icons/icon-bell.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.95081 19.8397H6.92941C7.0088 21.0615 7.70572 22.1554 8.77756 22.7464C9.8494 23.3331 11.1506 23.3331 12.2224 22.7464C13.2943 22.1598 13.9912 21.0615 14.0706 19.8397H18.0492C18.5564 19.8397 19.0416 19.6456 19.4033 19.2927C19.765 18.9399 19.9811 18.4635 19.9988 17.9562C20.0164 17.449 19.84 16.9594 19.5004 16.5845L17.7493 14.6349V11.0665C17.7448 9.62853 17.317 8.22588 16.5142 7.03054C15.7114 5.8396 14.5734 4.90891 13.2458 4.36196V3.63858C13.2546 2.93284 12.9943 2.24916 12.5224 1.72868C12.046 1.20378 11.3932 0.881792 10.6919 0.820039C9.92879 0.767109 9.18336 1.03617 8.62759 1.56106C8.07182 2.08155 7.75865 2.80493 7.75424 3.56801V4.3752C6.42657 4.92214 5.28856 5.84842 4.4902 7.03936C3.68742 8.23029 3.25957 9.63294 3.25516 11.0709V14.6349L1.49963 16.5801C1.16 16.955 0.983562 17.449 1.00121 17.9562C1.01885 18.4635 1.23057 18.9399 1.59667 19.2927C1.95836 19.6412 2.44797 19.8397 2.95081 19.8397ZM10.4978 22.1863C9.85381 22.1863 9.23188 21.9437 8.7555 21.5114C8.27913 21.0791 7.97919 20.4837 7.91744 19.8397H13.0781C13.0164 20.4793 12.7165 21.0747 12.2401 21.5114C11.7637 21.9437 11.1418 22.1819 10.4978 22.1863ZM17.0303 15.3141L18.7593 17.2417C18.927 17.4269 19.0152 17.6695 19.0063 17.921C18.9975 18.1724 18.8917 18.4062 18.7108 18.5782C18.53 18.7502 18.2918 18.8472 18.0404 18.8472H2.95081C2.69939 18.8472 2.4612 18.7502 2.28036 18.5782C2.09951 18.4062 1.99365 18.168 1.98483 17.921C1.97601 17.6695 2.06422 17.4269 2.23184 17.2417L4.11086 15.1509C4.19026 15.0583 4.23878 14.9436 4.23878 14.8201V11.0665C4.24319 9.77409 4.64458 8.51259 5.39001 7.45839C6.13545 6.40419 7.19406 5.60142 8.41146 5.16915C8.60995 5.09858 8.73786 4.91332 8.73786 4.70601V3.55919C8.73786 3.09163 8.92312 2.64614 9.25393 2.31532C9.58474 1.98451 10.0302 1.79925 10.4978 1.79925H10.6169C11.0712 1.84336 11.4902 2.05508 11.7946 2.39472C12.0989 2.73435 12.2621 3.17544 12.2533 3.63417V4.69719C12.2533 4.9045 12.3856 5.08976 12.5797 5.16033C13.7971 5.59259 14.8513 6.39096 15.6012 7.44516C16.3466 8.49935 16.7524 9.76086 16.7568 11.0532V14.3217"/>
+</svg>

server/vbv_lernwelt/static/icons/icon-persons.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.64928 0.5C6.27047 0.5 4.32452 2.44556 4.32452 4.82443C4.32452 7.20306 6.27023 9.14886 8.64928 9.14886C11.0281 9.14886 12.974 7.2033 12.974 4.82443C12.974 2.44581 11.0283 0.5 8.64928 0.5ZM17.8392 1.04049C15.9081 1.04049 14.3253 2.62317 14.3253 4.55406C14.3253 6.48496 15.9081 8.06763 17.8392 8.06763C19.7702 8.06763 21.353 6.48496 21.353 4.55406C21.353 2.62317 19.7702 1.04049 17.8392 1.04049ZM8.64928 2.12148C10.1516 2.12148 11.3522 3.32201 11.3522 4.82419C11.3522 6.32656 10.1516 7.5269 8.64928 7.5269C7.14699 7.5269 5.94636 6.32656 5.94636 4.82419C5.94636 3.32201 7.14699 2.12148 8.64928 2.12148ZM17.8392 2.66197C18.8937 2.66197 19.7312 3.49943 19.7312 4.55382C19.7312 5.60822 18.8937 6.44567 17.8392 6.44567C16.7847 6.44567 15.9472 5.60822 15.9472 4.55382C15.9472 3.49943 16.7847 2.66197 17.8392 2.66197ZM17.8392 8.60793C15.5561 8.60793 13.519 9.22386 12.3238 10.4576C11.2058 10.1344 9.96439 9.95929 8.64952 9.95929C6.34972 9.95929 4.2667 10.4966 2.69442 11.4203C1.12239 12.3441 0 13.7266 0 15.3647V19.6891C0 20.1137 0.386319 20.5 0.810923 20.5H16.4878C16.9124 20.5 17.2987 20.1137 17.2987 19.6891V16.9864H23.5155C23.94 16.9864 24.3264 16.6001 24.3264 16.1756V12.662C24.3264 11.3632 23.4412 10.2969 22.257 9.62994C21.0725 8.96295 19.5301 8.60813 17.8393 8.60813L17.8392 8.60793ZM17.8392 10.2297C19.2928 10.2297 20.5868 10.5601 21.4542 11.049C22.3219 11.5377 22.7042 12.0978 22.7042 12.6622V15.3649H17.2984C17.2984 13.727 16.176 12.3446 14.604 11.4206C14.4392 11.3237 14.2644 11.23 14.0887 11.1419C14.959 10.621 16.3003 10.2299 17.8389 10.2299L17.8392 10.2297ZM8.64928 11.581C10.6919 11.581 12.5232 12.0729 13.7848 12.8142C15.0464 13.5554 15.6768 14.4742 15.6768 15.3649V18.8785H1.62165V15.3649C1.62165 14.4742 2.25211 13.5555 3.51364 12.8142C4.77518 12.0729 6.60645 11.581 8.64918 11.581H8.64928Z"/>
+</svg>