From f560531df25f9cebea2a2419e5767fae2fe9dc7b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 Nov 2024 15:51:59 +0100
Subject: [PATCH] Split up menu into internal and external links

---
 client/src/components/header/MobileMenu.vue   |  8 +++-
 client/src/components/header/SubNavItem.vue   |  5 +-
 .../src/components/header/SubNavigation.vue   | 46 +++++++++++++------
 client/src/utils/navigation.ts                |  5 ++
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index b4507401..0e44f74c 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/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" />
diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
index 736e93ab..cb38f36b 100644
--- a/client/src/components/header/SubNavItem.vue
+++ b/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
diff --git a/client/src/components/header/SubNavigation.vue b/client/src/components/header/SubNavigation.vue
index 7250b767..4fecf8b7 100644
--- a/client/src/components/header/SubNavigation.vue
+++ b/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">
-      <li
-        v-for="item in items"
-        :key="item.id"
-        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">
-          {{ item.name }}
-        </SubNavItem>
-      </li>
-    </ul>
+    <div class="center hidden items-end justify-between lg:flex">
+      <ul class="flex flex-row gap-10">
+        <li
+          v-for="item in internalLinks"
+          :key="item.id"
+          class="border-t-2 border-t-transparent"
+          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
+        >
+          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
+            {{ item.name }}
+          </SubNavItem>
+        </li>
+      </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>
diff --git a/client/src/utils/navigation.ts b/client/src/utils/navigation.ts
index 5c8cd323..d0cbf59d 100644
--- a/client/src/utils/navigation.ts
+++ b/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");
+};