feat: Add local search (#59)

* feat: Add local search

* Fix: style search

* feat: make sure the search dropdown is visible

---------

Co-authored-by: kotte <konstantin.aistre@gmail.com>

src/css/navbar.scss

@@ -35,6 +35,19 @@
 
     &__items {
         align-items: stretch;
+
+        &:last-child > *:last-child {
+            // Hack to center search input
+            display: flex;
+
+            @media (max-width: 996px) {
+                & {
+                    position: relative;
+                    right: 0;
+                    padding-right: var(--ifm-navbar-padding-horizontal)
+                }
+            }
+        }
     }
 
     &__item {
@@ -42,6 +55,7 @@
             calc(var(--ifm-navbar-padding-vertical) + 5px);
         font-size: 16px;
         font-weight: var(--doc-font-semibold);
+        order: 1;
 
         &:not(.is-download-button) {
             -webkit-font-smoothing: antialiased;
@@ -77,6 +91,12 @@
             &:hover {
                 background-color: var(--doc-color-noodl-orange-140);
             }
+
+            @media (max-width: 996px) {
+                & {
+                    display: none;
+                }
+            }
         }
 
         &.is-discord {
@@ -100,6 +120,14 @@
                 width: 36px;
                 background-image: url('../../static/img/discord.svg');
             }
+
+            @media (max-width: 996px) {
+                & {
+                    padding: 0;
+                }
+            }
         }
     }
 }
+
+

src/css/searchbar.scss

@@ -20,34 +20,55 @@
     );
 }
 
-.DocSearch {
-    padding: 0 !important;
+.search-bar-outer {
+    margin-bottom: 80px;
 
-    main & {
-        margin-bottom: 80px;
+    .navbar__search {
+        margin-left: 0;
+
+        & > :last-child {
+            // give keyboard shortcut some extra spacing
+            padding-right: 20px;
+        }
     }
 
-    .navbar & {
-        display: none;
+    span {
+        width: 100%;
+    }
+
+    & .navbar__search-input {
+        height: auto !important;
+        border-radius: 2px !important;
+        border: 1px solid var(--doc-color-noodl-black-light) !important;
+        width: 100% !important;
+        background-color: var(--doc-color-noodl-black-darker) !important;
+        font-size: 20px;
+        padding: 20px 100px 20px 40px !important;
+
+        @media (max-width: 576px) {
+            & {
+                padding: 20px 40px !important;
+            }
+        }
     }
 }
 
-.navbar__items--right :last-child {
-    display: none !important;
-}
+.navbar {
+    &__search {
+        align-self: center;
 
-.DocSearch-Button {
-    height: auto !important;
-    border-radius: 2px !important;
-    border: 1px solid var(--doc-color-noodl-black-light) !important;
-    width: 100% !important;
-    padding: 20px 24px !important;
-}
+        input {
+            background-color: var(--doc-color-logic-node);
+            color: var(--doc-color-noodl-white-85)
+        }
 
-.search-bar-outer > :first-child {
-    padding: 0;
-}
+        > div > span > span {
+            // the results box
+            right: auto !important;
+        }
 
-.DocSearch-Hit[aria-selected='true'] a {
-    background-color: var(--doc-color-noodl-blue-80) !important;
+        @media (min-width: 996px) {
+            margin-top: -4px;
+        }
+    }
 }

src/theme/DocSidebar/Desktop/Content/index.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import Content from '@theme-original/DocSidebar/Desktop/Content'
-import SearchBar from '@theme-original/SearchBar'
-
-export default function ContentWrapper(props) {
-    return (
-        <>
-            <div className="search-bar-outer">
-                <SearchBar />
-            </div>
-
-            <Content {...props} />
-        </>
-    )
-}