Foldable documentation menu for mobiles (#353)

* foldable documentation menu for mobiles

* regenerated css

* Update qdrant-landing/themes/qdrant/layouts/partials/docs_sidebar.html

Co-authored-by: Andrey Vasnetsov <andrey@vasnetsov.com>

---------

Co-authored-by: Andrey Vasnetsov <andrey@vasnetsov.com>

qdrant-landing/themes/qdrant/layouts/documentation/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<article class="documentation__article col-12 col-md-9 col-lg-8 pb-5">
+<article class="documentation__article col-12 col-md-9 col-lg-8 pt-4 pt-lg-0 pb-5">
 
     {{ $wrappedTable := printf "<div class=table-responsive> ${1} </div>" }}
     {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}

qdrant-landing/themes/qdrant/layouts/documentation/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<div class="col-12 col-md-9 col-lg-8 pb-5">
+<div class="col-12 col-md-9 col-lg-8 pt-4 pt-lg-0 pb-5">
 
     <article class="documentation__article">
         {{ $wrappedTable := printf "<div class=table-responsive> ${1} </div>" }}

qdrant-landing/themes/qdrant/layouts/partials/docs_sidebar.html

@@ -1,9 +1,14 @@
 {{$currentNode := .}}
-<nav class="documentation__sidebar-inner col-lg-2 col-md-3 col-12 pr-4 mb-4 position-relative">
+<div id="sidebar-mobile-header" class="col-12">
+    <button id="sidebar-toggle" class="documentation__sidebar-toggle btn-style-four btn-style-four_responsive d-inline-block d-md-none">
+        <span class="text">Docs Menu <i class="mt-1 ml-4"></i></span>
+    </button>
+</div>
+<nav id="sidebar" class="documentation__sidebar-inner col-lg-2 col-md-3 col-12 pr-lg-4 mb-4 position-relative">
 
     {{ $subject := site.GetPage "documentation" }}
 
-    <div id="accordion" class="sticky-top documentation__sidebar-inner">
+    <div id="accordion" class="sticky-top">
 
         <!-- Button triggers search modal -->
         <button type="button" class="qdr-search-input-btn w-100 mb-2 w-100" data-target="#searchModal">

qdrant-landing/themes/qdrant/layouts/partials/js.html

@@ -86,4 +86,32 @@
 
 </script>
 <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-{{ end }}
+{{ end }}
+
+{{ if eq .Section "documentation" }}
+<script>
+  $(function () {
+    const moveSearchButton = function() {
+      if ($(window).width() > 991) {
+        $('.qdr-search-input-btn').detach().prependTo('#sidebar > #accordion');
+      } else {
+        $('.qdr-search-input-btn').detach().prependTo('#sidebar-mobile-header');
+      }
+    }
+
+    moveSearchButton();
+
+    $('#sidebar-toggle').on('click', function () {
+      $('#sidebar').slideToggle();
+      $(this).toggleClass('active');
+    });
+
+    $(window).on('resize', function () {
+      moveSearchButton();
+      if ($(window).width() > 991) {
+        $('#sidebar').show();
+      }
+    });
+  })
+</script>
+{{ end }}

qdrant-landing/themes/qdrant/static/css/blocks/_documentation.scss

@@ -42,15 +42,21 @@
   }
 
   &__sidebar-inner {
+    display: none;
     top: lib.rem(8);
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
   }
 
   &__sidebar-list {
-    max-height: calc(100vh - 90px);
-    overflow-y: scroll;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-    scroll-behavior: smooth;
+    @include media-breakpoint-up(md) {
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+      scroll-behavior: smooth;
+      overflow-y: scroll;
+      max-height: calc(100vh - 90px);
+    }
 
     &::-webkit-scrollbar {
       display: none;
@@ -122,4 +128,24 @@
     padding-top: 1rem;
     padding-bottom: 0.3rem;
   }
+
+  &__sidebar-toggle {
+    & i:after {
+      display: inline-block;
+      width: lib.rem(18);
+      height: lib.rem(18);
+      content: "\f078";
+      text-align: center;
+      font-family: 'Font Awesome 5 Free';
+      font-size: lib.rem(18);
+      font-weight: 600;
+      color: white;
+      font-style: normal;
+    }
+    &.active {
+      & i:after {
+        content: "\f077";
+      }
+    }
+  }
 }