feat: realtime tabs as subpages (#2450)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -7,6 +7,7 @@
         :to="localePath(navigation.target)"
         class="nav-link"
         tabindex="0"
+        :exact="navigation.exact"
       >
         <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
@@ -40,26 +41,31 @@ const primaryNavigation = [
     target: "index",
     svg: "link-2",
     title: t("navigation.rest"),
+    exact: true,
   },
   {
     target: "graphql",
     svg: "graphql",
     title: t("navigation.graphql"),
+    exact: false,
   },
   {
     target: "realtime",
     svg: "globe",
     title: t("navigation.realtime"),
+    exact: false,
   },
   {
     target: "documentation",
     svg: "book-open",
     title: t("navigation.doc"),
+    exact: false,
   },
   {
     target: "settings",
     svg: "settings",
     title: t("navigation.settings"),
+    exact: false,
   },
 ]
 </script>
@@ -105,6 +111,20 @@ const primaryNavigation = [
     @apply text-tiny;
   }
 
+  &.active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
+
+    .material-icons,
+    .svg-icons {
+      @apply opacity-100;
+    }
+
+    &::after {
+      @apply bg-accent;
+    }
+  }
   &.exact-active-link {
     @apply text-secondaryDark;
     @apply bg-primaryLight;