feat: Add the search input to the sidebar

src/components/Sidebar.js

@@ -1,19 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 import Logo from './Logo';
 import Navigation from './Navigation';
+import SearchInput from './SearchInput';
 import styles from './Sidebar.module.scss';
 
-const Sidebar = ({ className }) => (
-  <aside className={cx(styles.sidebar, className)}>
-    <Link to="/">
-      <Logo className={styles.logo} />
-    </Link>
-    <Navigation className={styles.nav} />
-  </aside>
-);
+const Sidebar = ({ className }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <aside className={cx(styles.sidebar, className)}>
+      <Link to="/">
+        <Logo className={styles.logo} />
+      </Link>
+      <SearchInput
+        className={styles.searchInput}
+        placeholder="Search developer docs"
+        onChange={(e) => setSearchTerm(e.target.value)}
+        value={searchTerm}
+      />
+      <Navigation className={styles.nav} searchTerm={searchTerm} />
+    </aside>
+  );
+};
 
 Sidebar.propTypes = {
   className: PropTypes.string,

src/components/Sidebar.module.scss

@@ -19,3 +19,7 @@
 .nav {
   margin-top: 1rem;
 }
+
+.searchInput {
+  margin: 1rem 0;
+}