From c4a4967659a7faa7e25ab71d8432bbc61ea64d2f Mon Sep 17 00:00:00 2001
From: Rick Reilly <rreilly@edx.org>
Date: Wed, 2 Jan 2019 16:35:41 -0500
Subject: [PATCH] wip

---
 package-lock.json                 | 39 +++++++++++++++++++++++++++++
 package.json                      |  1 +
 src/components/Header/header.scss |  8 ++++++
 src/components/Header/index.jsx   | 41 +++++++++++++++++++++----------
 4 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 26e2be2..8fe7d07 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -2875,6 +2875,21 @@
         }
       }
     },
+    "@babel/runtime": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+      "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.40.tgz",
@@ -13559,6 +13574,14 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -20129,6 +20152,17 @@
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==",
       "dev": true
     },
+    "react-media": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/react-media/-/react-media-1.9.2.tgz",
+      "integrity": "sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.2",
+        "json2mq": "^0.2.0",
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-proptype-conditional-require": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
@@ -22379,6 +22413,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
diff --git a/package.json b/package.json
index 2dcacc8..eb18196 100755
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "query-string": "^5.1.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-media": "^1.9.2",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 3f95c13..0d107fe 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -13,4 +13,12 @@
         content: "\00BB";
         margin-left: 4px;
     }
+}
+
+.color-gray {
+    color: #767676;
+}
+
+.justify-self-start {
+    justify-self: start !important;
 }
\ No newline at end of file
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 5200926..d2dabbb 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink, Icon } from '@edx/paragon';
+import classNames from 'classnames';
+import Media from 'react-media';
 
 import EdxLogo from '../../../assets/edx-sm.png';
 
@@ -20,18 +22,31 @@ export default class Header extends React.Component {
   render() {
     return (
       <div className="mb-3">
-        <header className="border-bottom-blue">
-          <div className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
-            <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
-          </div>
-          <div className>
-            <a className="nav-link border-bottom-gray" href="https://www.google.com">Rick</a>
-            <a className="nav-link border-bottom-gray" href="https://www.google.com">Alex</a>
-            <a className="nav-link border-bottom-gray" href="https://www.google.com">Zach</a>
-            <a className="nav-link border-bottom-gray" href="https://www.google.com">Jansen</a>
-            <a className="nav-link border-bottom-gray" href="https://www.google.com">Simon</a>
-          </div>
-        </header>
+        <Media query="(max-width: 992px)">
+          {matches =>
+            (matches ? (
+              <header className="border-bottom-blue">
+                <div className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
+                  <button className="border-0 mr-auto" onClick={() => this.setState({ mobileNavOpen: !this.state.mobileNavOpen })}>
+                    <Icon className={classNames('fa', 'fa-2x', 'color-gray', { 'fa-bars': !this.state.mobileNavOpen }, { 'fa-times': this.state.mobileNavOpen })} />
+                  </button>
+                  <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
+                </div>
+                {this.state.mobileNavOpen &&
+                  <div>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Rick</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Alex</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Zach</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Jansen</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Simon</a>
+                  </div>}
+              </header>
+          ) : (
+            <header>
+              <h1>hello world</h1>
+            </header>))
+        }
+        </Media>
       </div>
     );
   }