feat(search): Add react-freecodecamp-search to Nav (freeCodeCamp#16209)

gracemgately · Dec 18, 2017 · b4542a5 · b4542a5
1 parent 34ae22f
commit b4542a5
Show file tree

Hide file tree

Showing 5 changed files with 1,016 additions and 12 deletions.
diff --git a/common/app/Nav/Nav.jsx b/common/app/Nav/Nav.jsx
@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import capitalize from 'lodash/capitalize';
 import { createSelector } from 'reselect';
+import FCCSearchBar from 'react-freecodecamp-search';
 
 import {
   MenuItem,
@@ -32,6 +33,9 @@ import { panesSelector } from '../Panes/redux';
 
 
 const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
+// TODO @freecodecamp-team: place this glyph in S3 like above, PR in /assets
+const fCCglyph = 'https://raw.githubusercontent.com/freeCodeCamp/assets/' +
+  '3b9cafc312802199ebba8b31fb1ed9b466a3efbb/assets/logos/FFCFire.png';
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
@@ -176,10 +180,11 @@ export class FCCNav extends React.Component {
     const shouldShowMapButton = panes.length === 0;
     return (
       <Navbar
-        className='nav-height'
-        id='navbar'
-        staticTop={ true }
-        >
+      className='nav-height'
+      id='navbar'
+      staticTop={ true }
+      >
+      <div className='nav-component-wrapper'>
         <Navbar.Header>
           <Navbar.Toggle children={ 'Menu' } />
           <NavbarBrand>
@@ -189,11 +194,17 @@ export class FCCNav extends React.Component {
               >
               <img
                 alt='learn to code javascript at freeCodeCamp logo'
-                className='img-responsive nav-logo'
+                className='img-responsive nav-logo logo'
                 src={ fCClogo }
               />
+              <img
+                alt='learn to code javascript at freeCodeCamp logo'
+                className='img-responsive nav-logo logo-glyph'
+                src={ fCCglyph }
+              />
             </a>
           </NavbarBrand>
+          <FCCSearchBar dropdown={ true } />
         </Navbar.Header>
         <Navbar.Collapse>
           <Nav
@@ -217,11 +228,6 @@ export class FCCNav extends React.Component {
                 /> :
                 null
             }
-            { !shouldShowMapButton &&
-                <li
-                  className='divider-vertical'
-                />
-            }
             {
               navLinks.map(
                 this.renderLink.bind(this, true)
@@ -233,7 +239,8 @@ export class FCCNav extends React.Component {
             />
           </Nav>
         </Navbar.Collapse>
-      </Navbar>
+      </div>
+    </Navbar>
     );
   }
 }

diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
@@ -197,3 +197,49 @@ li.nav-avatar {
     padding-right: 10px;
   }
 }
+
+.nav-component-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  .fcc_searchBar {
+    width: auto;
+    flex-grow: 1
+  }
+
+  .navbar-header {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+
+}
+
+.logo-glyph {
+  height: 30px;
+  width: auto;
+}
+
+.logo {
+  display: none !important;
+}
+
+
+@media (min-width: 992px) {
+  .logo-glyph {
+    display: none !important;
+  }
+
+  .logo {
+    display: block !important;
+  }
+
+}
+
+@media screen and (max-width: 768px) {
+  .nav-component-wrapper {
+    display: block
+  }
+
+}