move searchbar outside of mobile docs menu (#971)

qdrant-landing/themes/qdrant-2024/assets/css/partials/_docs-menu.scss

@@ -38,6 +38,8 @@
 
   &__input {
     position: relative;
+    margin-top: $spacer;
+    margin-bottom: $spacer * 2;
 
     svg {
       position: absolute;
@@ -78,7 +80,6 @@
   }
 
   &__links {
-    margin-top: $spacer * 1.5;
 
     &-title {
       color: $neutral-98;
@@ -180,6 +181,14 @@
       padding: 0;
     }
 
+    &__input {
+      margin-bottom: 0;
+    }
+
+    &__links {
+      margin-top: $spacer * 1.5;
+    }
+
     &__links-group {
       &.active {
         .docs-menu__links-group-heading > a {

qdrant-landing/themes/qdrant-2024/assets/js/documentation.js

@@ -1,4 +1,5 @@
 import ThemeSwitch from './theme-switch.js';
+import { XL_BREAKPOINT } from './constants';
 
 const themeSwitch = new ThemeSwitch();
 
@@ -6,9 +7,28 @@ document.addEventListener('DOMContentLoaded', () => {
   themeSwitch.initSwitcher();
   const sidebar = document.getElementById('sidebar');
   const sidebarToggle = document.getElementById('sidebar-toggle');
+  const searchbar = document.getElementsByClassName('docs-menu__input')[0];
+  const docsMenu = document.getElementsByClassName('docs-menu')[0];
 
   sidebarToggle.addEventListener('click', () => {
     sidebarToggle.classList.toggle('active');
     sidebar.classList.toggle('active');
   });
+
+  const moveSearchButton = function() {
+    const checkIfFirstChildIsSearch = (element) => {
+      return element.children.length > 0 && element.children[0].classList.contains('docs-menu__input');
+    }
+
+    const isMobile = window.innerWidth <= XL_BREAKPOINT;
+    if (isMobile && !checkIfFirstChildIsSearch(docsMenu)) {
+      docsMenu.before(searchbar);
+    } else if (!isMobile && !checkIfFirstChildIsSearch(sidebar)) {
+      sidebar.before(searchbar);
+    }
+  }
+
+  moveSearchButton();
+
+  window.addEventListener('resize', moveSearchButton);
 });