fix: make navigator filter stick to bottom always.

Author: Dobromir Hristov

src/components/Navigator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navigator">
+  <div class="navigator" :style="{ '--sticky-top-offset': topOffset }">
     <NavigatorCard
       :technology="technology.title"
       :kind="technology.kind"
@@ -48,8 +48,22 @@ export default {
   data() {
     return {
       filter: '',
+      topOffset: '0px',
     };
   },
+  mounted() {
+    const anchor = document.getElementById('nav-sticky-anchor');
+    if (anchor.offsetTop === 0) return;
+    const cb = () => {
+      const y = Math.max(document.getElementById('nav-sticky-anchor').getBoundingClientRect().y, 0);
+      this.topOffset = `${y}px`;
+    };
+    window.addEventListener('scroll', cb);
+    cb();
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('scroll', cb);
+    });
+  },
   computed: {
     // filters the children based on the filter input
     filteredTree({ technology, filter }) {
@@ -91,14 +105,18 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .navigator {
-  overflow: hidden auto;
   position: sticky;
   top: $nav-height;
-  max-height: calc(100vh - #{$nav-height});
+  max-height: calc(100vh - #{$nav-height} - var(--sticky-top-offset));
+  height: 100%;
+  padding-bottom: 50px;
+  box-sizing: border-box;
 }
 
 .navigator-filter {
-  position: sticky;
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
   bottom: 0;
   z-index: 1;
   padding: 8px 20px;

src/components/Navigator/HighlightMatches.vue

@@ -8,6 +8,9 @@
 /**
  * Component used to mark plain text, based on a provided matcher string.
  */
+
+import { escapeHtml } from 'docc-render/utils/strings';
+
 export default {
   name: 'HighlightMatch',
   props: {
@@ -28,8 +31,8 @@ export default {
      * @return {string}
      */
     parsedText: ({ matcher, text }) => (matcher
-      ? text.replace(matcher, match => `<span class="match">${match}</span>`)
-      : text),
+      ? text.replace(matcher, match => `<span class="match">${escapeHtml(match)}</span>`)
+      : escapeHtml(text)),
   },
 };
 </script>

src/components/Navigator/NavigatorCard.vue

@@ -67,7 +67,8 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .navigator-card {
-  overflow: hidden;
+  overflow: hidden auto;
+  height: 100%;
 
   .head-wrapper {
     padding: 10px 20px;