diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_docs-menu.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_docs-menu.scss index d507f9c64..147189d87 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_docs-menu.scss +++ b/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 { diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/documentation.js b/qdrant-landing/themes/qdrant-2024/assets/js/documentation.js index 883d0d9a9..adb05574d 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/js/documentation.js +++ b/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); });