wip

src/App.scss

@@ -5,6 +5,8 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
 @import "~@edx/paragon/src/SearchField/SearchField";
+@import "./components/Gradebook/gradebook";             
 
 @import "./components/Gradebook/gradebook";
 @import "./components/Gradebook/footer";
+@import "./components/Header/header";

src/components/Header/_header.scss

@@ -0,0 +1,24 @@
+.color-gray-dark {
+    color: #767676;
+}
+
+.weight-bold {
+    font-weight: 600;
+}
+
+.size-16 {
+    font-size: 16px;
+}
+
+.border-bottom-blue {
+    border-bottom: 1px solid #0075b4;
+}
+
+.border-bottom-gray {
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.nav-link::after {
+    content: '\00BB';
+    padding-left: 4px;
+}

src/components/Header/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink, Icon } from '@edx/paragon';
+import { configuration } from '../../config';
 
 import EdxLogo from '../../../assets/edx-sm.png';
 
@@ -24,6 +25,15 @@ export default class Header extends React.Component {
           <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
           <div />
         </header>
+        {this.state.mobileNavOpen &&
+        <nav className="d-flex flex-column weight-bold size-16">
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Rick</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Alex</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Jasen</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Doug</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Simon</a>
+        </nav>
+        }
       </div>
     );
   }