feat: ✨ Move search button to sidebar

sidebars.js

@@ -24,6 +24,7 @@ const sidebars = {
       label: 'Learn',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'learn/index'},
       items: [
         'learn/index',
         'learn/the-network',
@@ -38,6 +39,7 @@ const sidebars = {
       label: 'Node',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'node/index'},
       items: [
         'node/index',
         'node/requirements',
@@ -71,6 +73,7 @@ const sidebars = {
       label: 'Open-source',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'Open-source/code-of-conduct'},
       items: [
         'Open-source/code-of-conduct',
         'Open-source/contributing',

src/css/custom.css

@@ -31,6 +31,8 @@
   --text-color: #202020;
   --link-active: #9E6C00;
   --neutral-6: #d9d9d9;
+  --neutral-7: #CECECE;
+  --neutral-11: #646464;
 
   --ifm-navbar-background-color: var(--background-color);
   --ifm-navbar-link-color: var(--text-color);

src/css/navbar.css

@@ -40,8 +40,9 @@
 
 @media (min-width: 996px) {
   .navbar__items {
-    justify-content: space-between;
+    justify-content: center;
     height: 100%;
+    gap: 18px;
   }
 
   .navbar__items div:nth-child(1) {

src/css/sidebar.css

@@ -40,6 +40,12 @@ nav>.menu__list {
             padding-left: 2rem;
         }
     }
+
+    .menu__caret {
+        position: absolute;
+        right: -17px;
+        top: 2px;
+    }
 }
 
 .theme-doc-sidebar-item-category::after {
@@ -62,10 +68,10 @@ nav>.menu__list {
 }
 
 @media (min-width: 997px) {
-    aside .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-Sidebar-styles-module {
-        top: 36px;
+    aside [class^="sidebarViewport"] {
+        top: 96px;
         position: sticky;
         height: inherit;
         max-height: inherit;
     }
-}
+}

src/theme/DocSidebar/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DocSidebar from '@theme-original/DocSidebar';
+
+import NavbarSearch from '@theme/Navbar/Search';
+import SearchBar from '@theme/SearchBar';
+
+import styles from './styles.module.css';
+
+export default function DocSidebarWrapper(props) {
+  return (
+    <div className={styles.sidebar}>
+      <NavbarSearch className={styles.navbar__search}>
+        <SearchBar />
+      </NavbarSearch>
+
+      <div className={styles.menu__wrapper}>
+        <DocSidebar {...props} />
+      </div>
+    </div>
+  );
+}

src/theme/DocSidebar/styles.module.css

@@ -0,0 +1,37 @@
+.navbar__search {
+    display: inline-block;
+    width: 100%;
+    padding: 0 42px 0 8px;
+
+    button,
+    button:hover,
+    button:active,
+    button:focus {
+      color: var(--text-color);
+      background: transparent;
+      border: 1px solid var(--neutral-7);
+      border-color: var(--neutral-7) ;
+      border-radius: 4px;
+      width: 100%;
+      height: 26px;
+      padding: 0 8px;
+      font-size: 12px;;
+    }
+
+    button:hover {
+      border-color: var(--link-active);
+      transition: ease-in-out 0.2s border-color;
+    }
+
+    svg, svg:hover {
+      display: block;
+      color: var(--text-color);
+      opacity: 1;
+    }
+  }
+
+  .menu__wrapper {
+    >div {
+        padding-top: 0 !important;
+    }
+  }

src/theme/Navbar/Content/index.js

@@ -6,10 +6,8 @@ import {
 } from '@docusaurus/theme-common/internal';
 import NavbarItem from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import SearchBar from '@theme/SearchBar';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
-import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 
@@ -38,7 +36,6 @@ export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
-  const searchBarItem = items.find((item) => item.type === 'search');
 
   return (
     <NavbarContentLayout
@@ -48,11 +45,7 @@ export default function NavbarContent() {
           <NavbarLogo />
           <div className={clsx('navbar__items', styles.navbar__items)}>
             {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
-            {!searchBarItem && (
-              <NavbarSearch className={styles.navbar__search}>
-                <SearchBar />
-              </NavbarSearch>
-            )}
+
             <NavbarItems items={leftItems} />
           </div>
 

src/theme/Navbar/Content/styles.module.css

@@ -51,25 +51,3 @@ Hide color mode toggle in small viewports
   }
 }
 
-.navbar__search {
-  display: inline-block;
-
-  button, button:hover {
-    color: var(--text-color);
-    background: transparent;
-    border: 1px solid transparent;
-    border-color: transparent;
-    border-radius: 4px;
-  }
-
-  button:hover {
-    border-color: var(--link-active);
-    transition: ease-in-out 0.2s border-color;
-  }
-
-  svg, svg:hover {
-    display: block;
-    color: var(--text-color);
-    opacity: 1;
-  }
-}