refactor: make header a link

Author: Dobromir Hristov

src/components/Navigator.vue

@@ -13,6 +13,7 @@
     <NavigatorCard
       v-if="!isFetching"
       :technology="technology.title"
+      :technology-path="technology.path || technology.url"
       :kind="kind"
       :children="flatChildren"
       :active-path="activePath"

src/components/Navigator/NavigatorCard.vue

@@ -14,10 +14,12 @@
       <button class="close-card-mobile" @click="$emit('close')">
         <InlineCloseIcon class="icon-inline close-icon" />
       </button>
-      <NavigatorLeafIcon :kind="kind" class="card-icon" />
-      <span class="card-link">
-        {{ technology }}
-      </span>
+      <Reference :url="technologyPath" class="navigator-head">
+        <NavigatorLeafIcon :kind="kind" with-colors class="card-icon" />
+        <div class="card-link">
+          {{ technology }}
+        </div>
+      </Reference>
     </div>
     <div class="card-body">
       <RecycleScroller
@@ -84,6 +86,7 @@ import NavigatorCardItem from 'docc-render/components/Navigator/NavigatorCardIte
 import InlineCloseIcon from 'theme/components/Icons/InlineCloseIcon.vue';
 import FilterIcon from 'theme/components/Icons/FilterIcon.vue';
 import ClearRoundedIcon from 'theme/components/Icons/ClearRoundedIcon.vue';
+import Reference from 'docc-render/components/ContentNode/Reference.vue';
 
 export const STORAGE_KEYS = {
   filter: 'navigator.filter',
@@ -106,6 +109,7 @@ export default {
     NavigatorCardItem,
     NavigatorLeafIcon,
     RecycleScroller,
+    Reference,
   },
   props: {
     technology: {
@@ -128,6 +132,10 @@ export default {
       type: String,
       required: true,
     },
+    technologyPath: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -429,11 +437,18 @@ $navigator-card-vertical-spacing: 18px !default;
   flex-direction: column;
 
   .head-wrapper {
+    position: relative;
+  }
+
+  .navigator-head {
     padding: 10px $navigator-card-horizontal-spacing;
     border-bottom: 1px solid var(--color-grid);
     display: flex;
     align-items: baseline;
-    position: relative;
+
+    &.router-link-exact-active {
+      background: var(--color-fill-gray-quaternary);
+    }
 
     @include breakpoint(small) {
       justify-content: center;
@@ -443,7 +458,6 @@ $navigator-card-vertical-spacing: 18px !default;
   .card-icon {
     width: 19px;
     height: 19px;
-    color: var(--color-figure-blue);
   }
 
   @include breakpoint(small) {
@@ -467,6 +481,7 @@ $navigator-card-vertical-spacing: 18px !default;
   position: absolute;
   left: 20px;
   top: 50%;
+  z-index: 1;
   transform: translateY(-50%);
   color: var(--color-link);
 

tests/unit/components/Navigator/NavigatorCard.spec.js

@@ -16,6 +16,7 @@ import 'intersection-observer';
 import { LEAF_SIZES } from '@/constants/sidebar';
 import NavigatorCardItem from '@/components/Navigator/NavigatorCardItem.vue';
 import { sessionStorage } from 'docc-render/utils/storage';
+import Reference from '@/components/ContentNode/Reference.vue';
 import { flushPromises } from '../../../../test-utils';
 
 jest.mock('docc-render/utils/debounce', () => jest.fn(fn => fn));
@@ -102,6 +103,7 @@ const activePath = [root0.path, root0Child0.path];
 
 const defaultProps = {
   technology: 'TestKit',
+  technologyPath: '/path/to/technology',
   children,
   activePath,
   showExtendedInfo: false,
@@ -128,6 +130,7 @@ describe('NavigatorCard', () => {
     const wrapper = createWrapper();
     expect(wrapper.find('.card-icon').props('kind')).toEqual(defaultProps.kind);
     // assert link
+    expect(wrapper.find(Reference).props('url')).toEqual(defaultProps.technologyPath);
     expect(wrapper.find('.card-link').text()).toBe(defaultProps.technology);
     // assert scroller
     expect(wrapper.find(RecycleScroller).props()).toMatchObject({