ADD search to all pages

docs/src/components/Docs/Container/index.js

@@ -1,5 +1,6 @@
+import { window } from 'global';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import Nav from '../Nav';
 import NavDropdown from '../Nav/dropdown';
 import Content from '../Content';
@@ -12,9 +13,33 @@ const getEditUrl = (selectedSectionId, selectedItemId) => {
   return `${gitHubRepoUrl}/blob/master/docs/src/pages/${docPath}/index.md`;
 };
 
+class Search extends Component {
+  componentDidMount() {
+    window.docsearch({
+      apiKey: 'a4f7f972f1d8f99a66e237e7fd2e489f',
+      indexName: 'storybook-js',
+      inputSelector: '#search',
+      debug: false,
+    });
+  }
+
+  render() {
+    return (
+      <div className="search">
+        <input
+          className="form-control form-control-sm"
+          type="search"
+          id="search"
+          placeholder="type to search"
+        />
+      </div>
+    );
+  }
+}
+
 const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }) => (
   <div id="docs-container" className="row">
-    <div className="nav col-sm-3 col-md-3 hidden-xs">
+    <div className="nav col-lg-3 col-md-3 d-none d-md-block">
       <Nav
         sections={sections}
         selectedSection={selectedItem.section}
@@ -23,7 +48,7 @@ const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }
         selectedItemId={selectedItemId}
       />
     </div>
-    <div className="content col-xs-12 col-sm-9 col-md-9 col-lg-9">
+    <div className="content col-xs-12 col-sm-12 col-md-9 col-lg-9">
       <div className="nav-dropdown">
         <NavDropdown
           sections={sections}
@@ -32,6 +57,8 @@ const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }
         />
       </div>
 
+      <Search />
+
       <Content
         title={selectedItem.title}
         content={selectedItem.content}

docs/src/components/Docs/Container/style.css

@@ -43,10 +43,6 @@
 }
 
 @media only screen and (max-width: 998px) {
-  #docs-container .nav {
-    display: none;
-  }
-
   #docs-container .content {
     border-left: none;
     margin: 15px 0;
@@ -57,3 +53,12 @@
     display: block;
   }
 }
+
+.search {
+  @media only screen and (min-width: 998px) {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 400px;
+  }
+}

docs/src/components/Docs/Nav/dropdown.js

@@ -58,13 +58,21 @@ class Nav extends React.Component {
     ) : (
       <div>
         <div>
-          <select value={selectedSectionId} onChange={event => this.handleHeadingChange(event)}>
+          <select
+            className="custom-select custom-select-sm"
+            value={selectedSectionId}
+            onChange={event => this.handleHeadingChange(event)}
+          >
             {sections.map(section => this.renderHeadingOpts(section))}
           </select>
         </div>
 
         <div>
-          <select value={selectedItemId} onChange={event => this.handleNavChange(event)}>
+          <select
+            className="custom-select custom-select-sm"
+            value={selectedItemId}
+            onChange={event => this.handleNavChange(event)}
+          >
             {navs.map(nav => this.renderNavOpts(nav))}
           </select>
         </div>

docs/src/new-components/layout/Header.js

@@ -126,6 +126,7 @@ const Nav = styled.div`
   position: relative;
   text-align: center;
   z-index: 3;
+  display: flex;
 `;
 
 const NavWrapper = styled.nav`