Fixing #310 by adding a blur behavior and displaying an "x" instead of the search icon when active

Author: skipjack

components/navigation/navigation-style.scss

@@ -120,6 +120,10 @@
       background:transparent;
       transition:color 250ms;
 
+      &.icon-cross {
+        display:none;
+      }
+
       &:hover {
         color:getColor(white);
       }
@@ -147,6 +151,14 @@
       margin-right:0.5em;
       width:400px;
     }
+
+    .navigation__search-icon.icon-cross {
+      display:block;
+    }
+
+    .navigation__search-icon.icon-magnifying-glass {
+      display:none;
+    }
   }
 }
 

components/navigation/navigation.jsx

@@ -5,6 +5,7 @@ import Logo from '../logo/logo';
 import './navigation-style';
 import './search-style';
 
+// TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
 let Sections = [
   { 
     title: 'Concepts', 
@@ -30,6 +31,7 @@ let Sections = [
   }
 ];
 
+// TODO: Move back to using state once we can handle algolia on our own
 export default class Navigation extends React.Component {
   render() {
     let { pageUrl, sections } = this.props;
@@ -67,10 +69,14 @@ export default class Navigation extends React.Component {
             <input 
               type="text" 
               className="navigation__search-input"
-              placeholder="Search documentation…" />
+              placeholder="Search documentation…"
+              onBlur={ this._toggleSearch.bind(this) } />
             <button 
               className="navigation__search-icon icon-magnifying-glass"
               onClick={ this._toggleSearch.bind(this) } />
+            <button 
+              className="navigation__search-icon icon-cross"
+              onClick={ this._toggleSearch.bind(this) } />
           </div>
         </Container>