From 6ddff58ba5359a554be71b64e32dd6e8949e2474 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 21 Jun 2021 15:33:51 +0530
Subject: [PATCH] feat: better route determination - fixed #1732

---
 components/app/Sidenav.vue               | 152 ++++++++++++++---------
 components/collections/graphql/index.vue |   2 +-
 components/collections/index.vue         |   2 +-
 components/environments/index.vue        |   2 +-
 components/history/index.vue             |   2 +-
 components/http/Headers.vue              |   2 +-
 components/http/Parameters.vue           |   2 +-
 components/http/Response.vue             |   2 +-
 components/realtime/Mqtt.vue             |   4 +-
 components/realtime/Socketio.vue         |   4 +-
 components/realtime/Sse.vue              |   4 +-
 components/realtime/Websocket.vue        |   4 +-
 components/teams/index.vue               |   2 +-
 pages/doc.vue                            |   4 +-
 pages/graphql.vue                        |  14 +--
 pages/index.vue                          |  22 +---
 pages/settings.vue                       |  10 +-
 17 files changed, 127 insertions(+), 107 deletions(-)

diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 3948eece4..90c766d15 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -9,7 +9,7 @@
         <nuxt-link
           v-tooltip.right="$t('home')"
           :to="localePath('index')"
-          :class="linkActive('/')"
+          :class="linkActive('index')"
           :aria-label="$t('home')"
         >
           <AppLogo alt class="material-icons" style="height: 24px" />
@@ -17,14 +17,14 @@
         <nuxt-link
           v-tooltip.right="$t('realtime')"
           :to="localePath('realtime')"
-          :class="linkActive('/realtime')"
+          :class="linkActive('realtime')"
         >
           <i class="material-icons">language</i>
         </nuxt-link>
         <nuxt-link
           v-tooltip.right="$t('graphql')"
           :to="localePath('graphql')"
-          :class="linkActive('/graphql')"
+          :class="linkActive('graphql')"
           :aria-label="$t('graphql')"
         >
           <svg
@@ -51,7 +51,7 @@
         <nuxt-link
           v-tooltip.right="$t('documentation')"
           :to="localePath('doc')"
-          :class="linkActive('/doc')"
+          :class="linkActive('doc')"
           :aria-label="$t('documentation')"
         >
           <i class="material-icons">topic</i>
@@ -59,65 +59,24 @@
         <nuxt-link
           v-tooltip.right="$t('settings')"
           :to="localePath('settings')"
-          :class="linkActive('/settings')"
+          :class="linkActive('settings')"
           :aria-label="$t('settings')"
         >
           <i class="material-icons">settings</i>
         </nuxt-link>
       </nav>
-      <nav v-if="$route.path == '/'" class="secondary-nav">
-        <a v-tooltip.right="$t('request')" href="#request">
-          <i class="material-icons">cloud_upload</i>
-        </a>
-        <a v-tooltip.right="$t('options')" href="#options">
-          <i class="material-icons">toc</i>
-        </a>
-        <a v-tooltip.right="$t('response')" href="#response">
-          <i class="material-icons">cloud_download</i>
-        </a>
-      </nav>
-      <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
-        <a v-tooltip.right="$t('request')" href="#request">
-          <i class="material-icons">cloud_upload</i>
-        </a>
-        <a v-tooltip.right="$t('communication')" href="#response">
-          <i class="material-icons">cloud_download</i>
-        </a>
-      </nav>
-      <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
-        <a v-tooltip.right="$t('endpoint')" href="#endpoint">
-          <i class="material-icons">cloud</i>
-        </a>
-        <a v-tooltip.right="$t('schema')" href="#schema">
-          <i class="material-icons">assignment_returned</i>
-        </a>
-        <a v-tooltip.right="$t('query')" href="#query">
-          <i class="material-icons">cloud_upload</i>
-        </a>
-        <a v-tooltip.right="$t('response')" href="#response">
-          <i class="material-icons">cloud_download</i>
-        </a>
-      </nav>
-      <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
-        <a v-tooltip.right="$t('import')" href="#import">
-          <i class="material-icons">folder</i>
-        </a>
-        <a v-tooltip.right="$t('documentation')" href="#documentation">
-          <i class="material-icons">insert_drive_file</i>
-        </a>
-      </nav>
-      <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
-        <a v-tooltip.right="$t('account')" href="#account">
-          <i class="material-icons">person</i>
-        </a>
-        <a v-tooltip.right="$t('theme')" href="#theme">
-          <i class="material-icons">brush</i>
-        </a>
-        <a v-tooltip.right="$t('extensions')" href="#extensions">
-          <i class="material-icons">extension</i>
-        </a>
-        <a v-tooltip.right="$t('proxy')" href="#proxy">
-          <i class="material-icons">public</i>
+      <nav
+        v-for="(link, index) in currentNavigation"
+        :key="`link-${index}`"
+        class="secondary-nav"
+      >
+        <a
+          v-for="(item, itemIndex) in link.secondary"
+          :key="`item-${itemIndex}`"
+          v-tooltip.right="$t(item.tooltip)"
+          :href="item.target"
+        >
+          <i class="material-icons">{{ item.icon }}</i>
         </a>
       </nav>
     </aside>
@@ -126,6 +85,79 @@
 
 <script>
 export default {
+  data() {
+    return {
+      navigation: [
+        {
+          primary: "index",
+          secondary: [
+            { tooltip: "request", target: "#request", icon: "cloud_upload" },
+            { tooltip: "options", target: "#options", icon: "toc" },
+            {
+              tooltip: "response",
+              target: "#response",
+              icon: "cloud_download",
+            },
+          ],
+        },
+        {
+          primary: "realtime",
+          secondary: [
+            { tooltip: "request", target: "#request", icon: "cloud_upload" },
+            {
+              tooltip: "communication",
+              target: "#response",
+              icon: "cloud_download",
+            },
+          ],
+        },
+        {
+          primary: "graphql",
+          secondary: [
+            { tooltip: "endpoint", target: "#endpoint", icon: "cloud" },
+            {
+              tooltip: "schema",
+              target: "#schema",
+              icon: "assignment_returned",
+            },
+            { tooltip: "query", target: "#query", icon: "cloud_upload" },
+            {
+              tooltip: "response",
+              target: "#response",
+              icon: "cloud_download",
+            },
+          ],
+        },
+        {
+          primary: "doc",
+          secondary: [
+            { tooltip: "import", target: "#import", icon: "folder" },
+            {
+              tooltip: "documentation",
+              target: "#documentation",
+              icon: "insert_drive_file",
+            },
+          ],
+        },
+        {
+          primary: "settings",
+          secondary: [
+            { tooltip: "account", target: "#account", icon: "person" },
+            { tooltip: "theme", target: "#theme", icon: "brush" },
+            { tooltip: "extensions", target: "#extensions", icon: "extension" },
+            { tooltip: "proxy", target: "#proxy", icon: "public" },
+          ],
+        },
+      ],
+    }
+  },
+  computed: {
+    currentNavigation() {
+      return this.navigation.filter((item) =>
+        this.$route.name.includes(item.primary)
+      )
+    },
+  },
   mounted() {
     window.addEventListener("scroll", () => {
       const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
@@ -147,8 +179,8 @@ export default {
   methods: {
     linkActive(path) {
       return {
-        "nuxt-link-exact-active": this.$route.path === path,
-        "nuxt-link-active": this.$route.path === path,
+        "nuxt-link-exact-active": this.$route.name.includes(path),
+        "nuxt-link-active": this.$route.name.includes(path),
       }
     },
   },
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index d8fa81903..c02c14b3e 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')">
+  <AppSection label="collections">
     <div class="show-on-large-screen">
       <input
         v-if="showCollActions"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a2baf4435..0dc1c38e8 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')">
+  <AppSection label="collections">
     <div class="show-on-large-screen">
       <input
         v-if="!saveRequest"
diff --git a/components/environments/index.vue b/components/environments/index.vue
index f0c4a5777..e099676c0 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="environments" :label="$t('environments')">
+  <AppSection label="environments">
     <div class="show-on-large-screen">
       <span class="select-wrapper">
         <select
diff --git a/components/history/index.vue b/components/history/index.vue
index 0003b8884..5b7a50356 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="history" :label="$t('history')">
+  <AppSection label="history">
     <div class="show-on-large-screen">
       <input
         v-model="filterText"
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index aa3f6158e..f7992c8c7 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="headers" label="Headers">
+  <AppSection label="headers">
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index df628686b..89c41ed23 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="parameters" label="Parameters">
+  <AppSection label="parameters">
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">
diff --git a/components/http/Response.vue b/components/http/Response.vue
index a799de11a..dd90365a2 100644
--- a/components/http/Response.vue
+++ b/components/http/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" ref="response" :label="$t('response')">
+  <AppSection label="response">
     <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
       <LensesResponseBodyRenderer :response="response" />
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 7a4f2a4de..3d895bdc4 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection :label="$t('request')">
+    <AppSection label="request">
       <ul>
         <li>
           <label for="mqtt-url">{{ $t("url") }}</label>
@@ -34,7 +34,7 @@
       </ul>
     </AppSection>
 
-    <AppSection :label="$t('communication')">
+    <AppSection label="response">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="log" />
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index dd5309e4f..0b7c506f5 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')">
+    <AppSection label="request">
       <ul>
         <li>
           <label for="socketio-url">{{ $t("url") }}</label>
@@ -43,7 +43,7 @@
       </ul>
     </AppSection>
 
-    <AppSection id="response" ref="response" :label="$t('communication')">
+    <AppSection label="response">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index e480d8503..e1a7bea2d 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')">
+    <AppSection label="request">
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
@@ -36,7 +36,7 @@
       </ul>
     </AppSection>
 
-    <AppSection id="response" ref="response" :label="$t('communication')">
+    <AppSection label="response">
       <ul>
         <li>
           <RealtimeLog :title="$t('events')" :log="events.log" />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 13ab1139b..5fe750886 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')">
+    <AppSection label="request">
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
@@ -112,7 +112,7 @@
       </ul>
     </AppSection>
 
-    <AppSection id="response" ref="response" :label="$t('communication')">
+    <AppSection label="response">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 1a74b6a09..3e27be9d9 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="teams" :label="$t('teams')">
+  <AppSection label="teams">
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
       <div v-if="currentUser"></div>
diff --git a/pages/doc.vue b/pages/doc.vue
index cb603ffbe..f5b41e144 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection ref="import" :label="$t('import')">
+        <AppSection label="import">
           <div class="flex flex-col">
             <label>{{ $t("collection") }}</label>
             <p class="info">
@@ -55,7 +55,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="documentation" :label="$t('documentation')">
+        <AppSection label="documentation">
           <div class="flex flex-col">
             <label>{{ $t("documentation") }}</label>
             <p v-if="items.length === 0" class="info">
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 4f5f8ff83..b19b7863c 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection ref="endpoint" :label="$t('endpoint')">
+        <AppSection label="endpoint">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
           </ul>
         </AppSection>
 
-        <AppSection ref="headers" :label="$t('headers')">
+        <AppSection label="headers">
           <div class="flex flex-col">
             <label>{{ $t("headers") }}</label>
             <ul v-if="headers.length !== 0">
@@ -150,7 +150,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="schema" :label="$t('schema')">
+        <AppSection label="schema">
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
@@ -212,7 +212,7 @@
           />
         </AppSection>
 
-        <AppSection ref="query" :label="$t('query')">
+        <AppSection label="query">
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
@@ -266,7 +266,7 @@
           />
         </AppSection>
 
-        <AppSection ref="variables" :label="$t('variables')">
+        <AppSection label="variables">
           <div class="flex flex-col">
             <label>{{ $t("variables") }}</label>
             <SmartAceEditor
@@ -285,7 +285,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="response" :label="$t('response')">
+        <AppSection label="response">
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
@@ -347,7 +347,7 @@
         >
           <SmartTabs>
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-              <AppSection ref="docs" :label="$t('docs')">
+              <AppSection label="docs">
                 <section class="flex-col">
                   <input
                     v-model="graphqlFieldsFilterText"
diff --git a/pages/index.vue b/pages/index.vue
index 72b10e620..52c7054b7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection :label="$t('request')" ref="request">
+        <AppSection label="request">
           <ul>
             <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
@@ -253,7 +253,7 @@
             </SmartTab>
 
             <SmartTab :id="'authentication'" :label="$t('authentication')">
-              <AppSection :label="$t('authentication')" ref="authentication">
+              <AppSection label="authentication">
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -352,11 +352,7 @@
                 </div>
               </AppSection>
 
-              <AppSection
-                v-if="showTokenRequest"
-                label="Access Token Request"
-                ref="accessTokenRequest"
-              >
+              <AppSection v-if="showTokenRequest" label="accessTokenRequest">
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -478,11 +474,7 @@
               :id="'pre_request_script'"
               :label="$t('pre_request_script')"
             >
-              <AppSection
-                v-if="showPreRequestScript"
-                :label="$t('pre_request_script')"
-                ref="preRequest"
-              >
+              <AppSection v-if="showPreRequestScript" label="preRequest">
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -518,11 +510,7 @@
             </SmartTab>
 
             <SmartTab :id="'tests'" :label="$t('tests')">
-              <AppSection
-                v-if="testsEnabled"
-                :label="$t('tests')"
-                ref="postRequestTests"
-              >
+              <AppSection v-if="testsEnabled" label="postRequestTests">
                 <ul>
                   <li>
                     <div class="row-wrapper">
diff --git a/pages/settings.vue b/pages/settings.vue
index 40432b9b6..47239b74d 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,7 +4,7 @@
       <Teams />
     </div>
 
-    <AppSection ref="account" :label="$t('account')">
+    <AppSection label="account">
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
         <div v-if="currentUser">
@@ -67,7 +67,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="theme" :label="$t('theme')">
+    <AppSection label="theme">
       <div class="flex flex-col">
         <label>{{ $t("theme") }}</label>
         <SmartColorModePicker />
@@ -84,7 +84,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="extensions" :label="$t('extensions')">
+    <AppSection label="extensions">
       <div class="flex flex-col">
         <label>{{ $t("extensions") }}</label>
         <div class="row-wrapper">
@@ -106,7 +106,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="proxy" :label="$t('proxy')">
+    <AppSection label="proxy">
       <div class="flex flex-col">
         <label>{{ $t("proxy") }}</label>
         <div class="row-wrapper">
@@ -177,7 +177,7 @@
       -->
     </AppSection>
 
-    <AppSection ref="experiments" :label="$t('experiments')">
+    <AppSection label="experiments">
       <div class="flex flex-col">
         <label>{{ $t("experiments") }}</label>
         <p class="info">