fix(docs-ui): move nav links to sidebar and fix mobile responsiveness

docs-site/content/.vuepress/components/Tabs.vue

@@ -101,11 +101,13 @@ export default {
 
 .nav-container
   display flex
+  flex-wrap nowrap
   justify-content flex-start
   list-style none
   padding-left: 1.25rem
   padding-top: 1.25rem
   padding-bottom: 0.5rem
+  padding-right: 1.25rem
   border-bottom none
   border-top-left-radius 6px
   border-top-right-radius 6px
@@ -114,10 +116,14 @@ export default {
   color $white
   font-size 0.70rem
   margin-left 0
+  overflow-x auto
+  -webkit-overflow-scrolling touch
 
   .nav
     margin-right 1rem
     cursor pointer
+    flex-shrink 0
+    white-space nowrap
 
     .nav-title
       display inline-block

docs-site/content/.vuepress/components/TypesenseSearchBox.vue

@@ -124,21 +124,18 @@ export default {
     align-items center
     width 100%
 
-  .search-query
-    padding-right 40px 
-
   .shortcut-indicator
     position absolute
     right 8px
     top 50%
     transform translateY(-50%)
     display inline-flex
     align-items center
-    gap 1px
     height 14px
     border 1px solid rgba(0, 0, 0, 0.1)
     border-radius 7px
     padding 0 4px
+    z-index 99
     font-size 9px
     font-family monospace
     font-weight 500
@@ -199,7 +196,7 @@ export default {
         padding 0
       .typesense-docsearch-suggestion--title
         font-weight 600
-        margin-bottom 0.8rem
+        margin-bottom 0.35rem
         color $textColor
       .typesense-docsearch-suggestion--subcategory-column
         vertical-align top
@@ -213,7 +210,7 @@ export default {
     .typesense-docsearch-footer
       border-color $borderColor
     .typesense-docsearch-suggestion--content
-      padding 0.8rem
+      padding 0.6rem 0.8rem
     .ds-cursor .typesense-docsearch-suggestion--content
       background-color #e7edf3 !important
       color $textColor
@@ -237,14 +234,22 @@ export default {
 
 @media (max-width: $MQMobile)
   .typesense-search-wrapper
+    .search-container
+      width auto
+      justify-content flex-end
+    .shortcut-indicator
+      display none
     .ds-dropdown-menu
       min-width calc(100vw - 4rem) !important
       max-width calc(100vw - 4rem) !important
+    .typesense-docsearch-suggestion--category-header
+      padding 5px 10px
+    .typesense-docsearch-suggestion--title
+      padding 0 !important
     .typesense-docsearch-suggestion--wrapper
-      padding 5px 7px 5px 5px !important
-    .typesense-docsearch-suggestion--subcategory-column
       padding 0 !important
-      background white !important
+    .typesense-docsearch-suggestion--subcategory-column
+      padding 5px 10px !important
     .typesense-docsearch-suggestion--subcategory-column-text:after
       content " > "
       font-size 10px
@@ -253,4 +258,32 @@ export default {
       width 5px
       margin -3px 3px 0
       vertical-align middle
+    .typesense-docsearch-suggestion--subcategory-inline
+      padding 0 10px !important
+    .typesense-docsearch-suggestion--content
+      display block !important
+      width 100% !important
+      box-sizing border-box
+      padding 5px 10px !important
+
+@media (max-width: $MQNarrow)
+  .typesense-search-wrapper.search-box
+    .search-container
+      &:not(:focus-within) .shortcut-indicator
+        display none
+      &:focus-within .shortcut-indicator
+        display inline-flex
+
+    .search-query
+      width 0 !important
+      border-color transparent !important
+      cursor pointer !important
+
+    .search-query:not(:focus)
+      margin-left 0 !important
+
+    .search-query:focus
+      width 7rem !important
+      cursor text !important
+      border-color $accentColor !important
 </style>

docs-site/content/.vuepress/components/VersionDropdown.vue

@@ -124,6 +124,7 @@ export default {
 
 <style lang="stylus" scoped>
 .version-switcher
+  display inline-block
   @media (min-width: $MQMobile)
     display: inline-block;
 
@@ -132,20 +133,24 @@ export default {
 
     select
       display: inline-block;
-      box-sizing: border-box;
-      padding: 0 1.6rem 0 1rem;
-      border: 1px solid $white;
-      background-color $lightGrayColor;
+      padding: 0.2rem 1.6rem 0.2rem 0.6rem;
+      align-text center
+      border: 1px solid #e1e1e1;
+      border-radius 3px
+      background-color #f8f8f8;
+      color #2c3e50
+      font-size 0.8rem
+      font-weight 500
       font: inherit;
       line-height: inherit;
       -webkit-appearance: none;
       -moz-appearance: none;
       -ms-appearance: none;
       appearance: none;
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
       background-repeat: no-repeat;
-      background-image: linear-gradient(45deg, transparent 50%, $accentColor 50%), linear-gradient(135deg, $accentColor 50%, transparent 50%);
-      background-position: right 15px top 1.2em, right 10px top 1.2em;
-      background-size: 5px 5px, 5px 5px;
+      background-position: right 0.8rem center;
+      background-size: 12px 8px;
 
   &.show-on-mobile-only
     display none
@@ -164,9 +169,8 @@ export default {
     padding 0.5em
     line-height 1.6
 
-    @media (max-width: $MQMobile)
-      margin-top 1em
-      margin-right 2em
+    margin-top 1em
+    margin-right 2em
 
     a:hover
       text-decoration underline

docs-site/content/.vuepress/config.js

@@ -161,6 +161,8 @@ let config = {
     logo: '/images/typesense_logo.svg',
     logoHeight: 42,
     logoWidth: 150,
+    logoHeightMobile: 28,
+    logoWidthMobile: 100,
     typesenseVersions: typesenseVersions,
     typesenseLatestVersion: typesenseLatestVersion,
     typesenseDocsearch: {

docs-site/content/.vuepress/styles/index.styl

@@ -8,10 +8,38 @@
 body
   font-family 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+// prevent horizontal overflow from content (code blocks, tables) affecting the page layout
+html, body
+  overflow-x hidden
+
+.theme-container
+  overflow-x hidden
+  max-width 100vw
+
+@media (min-width: ($MQMobile + 1px))
+  .sidebar
+    .nav-links
+      display block !important
+      border-bottom 1px solid $borderColor
+      padding 0.5rem 0 0.75rem 0
+      a
+        font-weight 600
+      .nav-item, .repo-link
+        display block
+        line-height 1.25rem
+        font-size 1.1em
+        padding 0.5rem 0 0.5rem 1.5rem
+
 // https://github.com/vuejs/vuepress/issues/703#issuecomment-484790660
 .theme-default-content pre[class*=language-]
   overflow-y hidden
 
+// ensure tables scroll horizontally within their container
+.theme-default-content table
+  display block
+  overflow-x auto
+  max-width 100%
+
 
 ul, ol
   margin-left 1em
@@ -44,4 +72,3 @@ figure
 
   figcaption
     text-align center
-

docs-site/content/.vuepress/theme/components/NavLinks.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="nav-links">
-    <VersionDropdown class="nav-item" show-on-mobile-only />
+    <VersionDropdown class="nav-item" />
     <!-- user links -->
     <div v-for="item in userLinks" :key="item.link" class="nav-item">
       <DropdownLink v-if="item.type === 'links'" :item="item" />
@@ -17,6 +17,7 @@
 
 <script>
 import DropdownLink from '@theme/components/DropdownLink.vue'
+import VersionDropdown from '../../components/VersionDropdown'
 import { resolveNavLinkItem } from '@parent-theme/util'
 import NavLink from '@theme/components/NavLink.vue'
 
@@ -26,6 +27,7 @@ export default {
   components: {
     NavLink,
     DropdownLink,
+    VersionDropdown,
   },
 
   computed: {
@@ -113,12 +115,9 @@ export default {
   .nav-item
     position relative
     display inline-block
-    margin-left 1.5rem
     line-height 2rem
     &:first-child
       margin-left 0
-  .repo-link
-    margin-left 1.5rem
 
 @media (max-width: $MQMobile)
   .nav-links