Split up menu into internal and external links

client/src/components/header/MobileMenu.vue

@@ -171,7 +171,11 @@ const mentorTabTitle = computed(() =>
               </li>
             </ul>
           </div>
-          <button v-if="user?.loggedIn" type="button" class="px-4 py-2 mt-6 flex items-center">
+          <button
+            v-if="user?.loggedIn"
+            type="button"
+            class="mt-6 flex items-center px-4 py-2"
+          >
             <!-- todo: correct action / route -->
             <it-icon-settings class="inline-block" />
             <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
@@ -179,7 +183,7 @@ const mentorTabTitle = computed(() =>
           <button
             v-if="user?.loggedIn"
             type="button"
-            class="px-4 py-2 mt-6 flex items-center"
+            class="mt-6 flex items-center px-4 py-2"
             @click="$emit('logout')"
           >
             <it-icon-logout class="inline-block" />

client/src/components/header/SubNavItem.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
 // https://router.vuejs.org/guide/advanced/extending-router-link
+import { isExternalLink as isExternalLinkFn } from "@/utils/navigation";
 
 defineOptions({
   inheritAttrs: false,
@@ -13,7 +14,7 @@ const props = defineProps({
 });
 
 const isExternalLink = computed(() => {
-  return typeof props.to === "string" && props.to.startsWith("https");
+  return isExternalLinkFn(props.to);
 });
 </script>
 
@@ -26,7 +27,7 @@ const isExternalLink = computed(() => {
     target="_blank"
   >
     <slot />
-    <it-icon-external-link />
+    <it-icon-external-link class="w-6" />
   </a>
   <!-- make `:to` explicit -->
   <router-link

client/src/components/header/SubNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SubNavItem from "@/components/header/SubNavItem.vue";
+import { isExternalLink } from "@/utils/navigation";
 import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -36,6 +37,13 @@ const selectRoute = (current: SubNavEntry) => {
   open.value = false;
   currentRoute.value = current;
 };
+
+const internalLinks = computed(() => {
+  return props.items.filter((i) => !isExternalLink(i.route));
+});
+const externalLinks = computed(() => {
+  return props.items.filter((i) => isExternalLink(i.route));
+});
 </script>
 <template>
   <nav class="border-b bg-white px-4 lg:px-8">
@@ -79,18 +87,30 @@ const selectRoute = (current: SubNavEntry) => {
         </ListboxOptions>
       </div>
     </Listbox>
-    <ul class="hidden flex-col gap-12 lg:flex lg:flex-row">
+    <div class="center hidden items-end justify-between lg:flex">
-      <li
+      <ul class="flex flex-row gap-10">
-        v-for="item in items"
+        <li
-        :key="item.id"
+          v-for="item in internalLinks"
-        class="border-t-2 border-t-transparent"
+          :key="item.id"
-        :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
+          class="border-t-2 border-t-transparent"
-      >
+          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
-        <!-- todo: split by external / internal and align external links to the right -->
+        >
-        <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
+          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
-          {{ item.name }}
+            {{ item.name }}
-        </SubNavItem>
+          </SubNavItem>
-      </li>
+        </li>
-    </ul>
+      </ul>
+      <ul class="flex flex-row gap-10">
+        <li
+          v-for="item in externalLinks"
+          :key="item.id"
+          class="border-b-2 border-t-2 border-b-transparent border-t-transparent"
+        >
+          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
+            {{ item.name }}
+          </SubNavItem>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>

client/src/utils/navigation.ts

@@ -1,6 +1,7 @@
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import { computed } from "vue";
+import type { RouteLocationRaw } from "vue-router";
 import { useRouteLookups } from "./route";
 
 export function useNavigationAttributes() {
@@ -77,3 +78,7 @@ export function useNavigationAttributes() {
     hasSessionTitle,
   };
 }
+
+export const isExternalLink = (route: string | RouteLocationRaw) => {
+  return typeof route === "string" && route.startsWith("https");
+};