chore(navigation): re-incorporate docsearch and tweak menu position

Author: skipjack

package.json

@@ -104,6 +104,7 @@
   },
   "dependencies": {
     "ajv": "^5.5.2",
+    "docsearch.js": "^2.5.2",
     "gitter-sidecar": "^1.2.3",
     "preact": "^8.2.7",
     "preact-compat": "3.17.0",

src/components/Navigation/Navigation.jsx

@@ -1,6 +1,7 @@
 // Import External Dependencies
 import React from 'react';
 import Banner from 'react-banner';
+import DocSearch from 'docsearch.js';
 
 // Import Utilities/Images
 import GitHubIcon from '../../styles/icons/github.svg';
@@ -12,33 +13,10 @@ import Logo from '../Logo/Logo';
 import Dropdown from '../Dropdown/Dropdown';
 
 // Load Styling
+import 'docsearch.js/dist/cdn/docsearch.css';
 import './Navigation.scss';
 import './Search.scss';
 
-// TODO: Re-incorporate docsearch (see `react-banner` docs and `SearchResults` component/discussion)
-//   componentDidMount() {
-//     if (typeof window !== 'undefined') {
-//       let docsearch = () => {};
-
-//       // XXX: hack around docsearch
-//       if (window.docsearch) {
-//         docsearch = window.docsearch.default || window.docsearch;
-//       }
-
-//       docsearch({
-//         apiKey: 'fac401d1a5f68bc41f01fb6261661490',
-//         indexName: 'webpack-js-org',
-//         inputSelector: '.navigation__search-input'
-//       });
-
-//       window.addEventListener('keyup', e => {
-//         if (e.which === 9 && e.target.classList.contains('navigation__search-input')) {
-//           this._openSearch();
-//         }
-//       });
-//     }
-//   }
-
 export default class Navigation extends React.Component {
   render() {
     let { pathname, links, toggleSidebar } = this.props;
@@ -78,4 +56,12 @@ export default class Navigation extends React.Component {
         onMenuClick={ toggleSidebar } />
     );
   }
+
+  componentDidMount() {
+    DocSearch({
+      apiKey: 'fac401d1a5f68bc41f01fb6261661490',
+      indexName: 'webpack-js-org',
+      inputSelector: '.navigation-search__input'
+    });
+  }
 }

src/components/Navigation/Search.scss

@@ -6,6 +6,8 @@
 
   .ds-dropdown-menu {
     box-shadow: none;
+    margin-top: 19px;
+    margin-right: -37px;
 
     &:before {
       content: none;