From 004d72a8536b441dc05a57ff734cc4b1e0e9afe7 Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Thu, 13 Jul 2023 20:34:02 +0200
Subject: [PATCH] Link swagger in navbar (#1984)

fix point 1 from #1944

Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>
---
 web/src/assets/locales/en.json              | 1 +
 web/src/components/layout/header/Navbar.vue | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index e3a598f8e..10441c7c4 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -5,6 +5,7 @@
     "repos": "Repos",
     "repositories": "Repositories",
     "docs": "Docs",
+    "api": "API",
     "logout": "Logout",
     "search": "Search…",
     "username": "Username",
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 685ec4332..b844f7105 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -15,6 +15,8 @@
       </router-link>
       <!-- Docs Link -->
       <a :href="docsUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('docs') }}</a>
+      <!-- API Link -->
+      <a :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('api') }}</a>
     </div>
     <!-- Right Icons Box -->
     <div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
@@ -70,6 +72,7 @@ export default defineComponent({
     const authentication = useAuthentication();
     const { darkMode } = useDarkMode();
     const docsUrl = config.docs || undefined;
+    const apiUrl = `${config.rootURL ?? ''}/swagger/index.html`;
 
     function doLogin() {
       authentication.authenticate(route.fullPath);
@@ -77,7 +80,7 @@ export default defineComponent({
 
     const version = config.version?.startsWith('next') ? 'next' : config.version;
 
-    return { darkMode, user: authentication.user, doLogin, docsUrl, version };
+    return { darkMode, user: authentication.user, doLogin, docsUrl, version, apiUrl };
   },
 });
 </script>