feat: better route determination - fixed #1732

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">
+      <nav
-        <a v-tooltip.right="$t('request')" href="#request">
+        v-for="(link, index) in currentNavigation"
-          <i class="material-icons">cloud_upload</i>
+        :key="`link-${index}`"
-        </a>
+        class="secondary-nav"
-        <a v-tooltip.right="$t('options')" href="#options">
+      >
-          <i class="material-icons">toc</i>
+        <a
-        </a>
+          v-for="(item, itemIndex) in link.secondary"
-        <a v-tooltip.right="$t('response')" href="#response">
+          :key="`item-${itemIndex}`"
-          <i class="material-icons">cloud_download</i>
+          v-tooltip.right="$t(item.tooltip)"
-        </a>
+          :href="item.target"
-      </nav>
+        >
-      <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
+          <i class="material-icons">{{ item.icon }}</i>
-        <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>
         </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-exact-active": this.$route.name.includes(path),
-        "nuxt-link-active": this.$route.path === path,
+        "nuxt-link-active": this.$route.name.includes(path),
       }
     },
   },

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"

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"

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

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"

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">

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">

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" />

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" />

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" />

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" />

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" />

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>

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">

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"

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
+              <AppSection v-if="showTokenRequest" label="accessTokenRequest">
-                v-if="showTokenRequest"
-                label="Access Token Request"
-                ref="accessTokenRequest"
-              >
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -478,11 +474,7 @@
               :id="'pre_request_script'"
               :label="$t('pre_request_script')"
             >
-              <AppSection
+              <AppSection v-if="showPreRequestScript" label="preRequest">
-                v-if="showPreRequestScript"
-                :label="$t('pre_request_script')"
-                ref="preRequest"
-              >
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -518,11 +510,7 @@
             </SmartTab>
 
             <SmartTab :id="'tests'" :label="$t('tests')">
-              <AppSection
+              <AppSection v-if="testsEnabled" label="postRequestTests">
-                v-if="testsEnabled"
-                :label="$t('tests')"
-                ref="postRequestTests"
-              >
                 <ul>
                   <li>
                     <div class="row-wrapper">

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">