fix(learn): implemented responsive header for mobile devices (#17467)

client/src/components/Header/components/NavLogo.js

@@ -17,7 +17,7 @@ function NavLogo() {
         ) : (
           <img
             alt='learn to code at freeCodeCamp logo'
-            className='nav-logo logo'
+            className='nav-logo logo-glyph'
             src={fCCglyph}
           />
         )

client/src/components/Header/components/login.css

@@ -15,6 +15,7 @@
   border-color: #f1a02a;
   color: #292f33 !important;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  height: auto;
 }
 .signup-btn:hover,
 .signup-btn:focus {

client/src/components/Header/header.css

@@ -7,7 +7,7 @@ header {
 
 #top-nav {
   background: #006400;
-  height: 38px;
+  height: 40px;
   margin-bottom: 0px;
   border-radius: 0;
   border: none;
@@ -16,12 +16,6 @@ header {
   padding: 0 30px 0 15px;
 }
 
-@media screen, (max-width: 630px) {
-  #top-nav {
-    padding: 0;
-  }
-}
-
 #top-nav .home-link {
   display: flex;
   align-items: center;
@@ -39,6 +33,7 @@ header {
   margin: 0;
   list-style: none;
   justify-content: space-around;
+  background-color: #006400;
 }
 
 #top-right-nav a,
@@ -81,6 +76,11 @@ header {
   color: #006400;
 }
 
+li.user-state-link {
+  position: relative;
+  bottom: 0;
+}
+
 li.user-state-link,
 li.user-state-link:hover,
 li.user-state-link:focus,
@@ -121,3 +121,73 @@ li.user-state-link > a:focus {
 .ais-Hits {
   background-color: #fff;
 }
+
+.mobile-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: #006400;
+  color: #fff;
+  margin-top: -40px;
+  height: 40px;
+  z-index: 300;
+}
+
+.mobile-menu .menu-button {
+  margin: 0 20px 0 12px;
+  padding: 2px 14px;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  cursor: pointer;
+  justify-self: flex-end;
+}
+
+.header-search {
+  position: relative;
+  top: 2px;
+  flex-grow: 1;
+}
+
+.mobile-menu .header-search {
+  top: -1px;
+}
+
+@media (max-width: 734px) {
+  #top-nav {
+    padding: 0;
+  }
+
+  .opened #top-right-nav {
+    transform: translate(0, 40px);
+    padding-bottom: 10px;
+    opacity: 1;
+  }
+
+  #top-right-nav {
+    transform: translate(0, -300px);
+    flex-direction: column;
+    width: 100%;
+    min-height: 180px;
+    margin: 0;
+    opacity: 0;
+  }
+
+  #top-right-nav li:last-child {
+    margin-right: 0;
+  }
+
+  .mobile-menu img {
+    margin: 0 0 0 10px;
+  }
+}
+
+@media (max-width: 420px) {
+  .mobile-menu img {
+    margin: 0 0 0 5px;
+  }
+
+  .mobile-menu .menu-button {
+    margin: 0 10px 0 4px;
+  }
+}

client/src/components/Header/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
+import Media from 'react-media';
 import FCCSearch from 'react-freecodecamp-search';
 
 import NavLogo from './components/NavLogo';
@@ -8,43 +9,89 @@ import UserState from './components/UserState';
 
 import './header.css';
 
-function Header({ disableSettings }) {
+class Header extends Component {
-  return (
+  constructor(props) {
-    <header>
+    super(props);
-      <nav id='top-nav'>
+    this.state = {
-        <Link className='home-link' to='/'>
+      isMenuOpened: false
-          <NavLogo />
+    };
-        </Link>
+    this.toggleClass = this.toggleClass.bind(this);
-        {disableSettings ? null : <FCCSearch />}
+  }
-        <ul id='top-right-nav'>
+
-          <li>
+  toggleClass() {
-            <Link to='/learn'>Curriculum</Link>
+    this.setState({
-          </li>
+      isMenuOpened: !this.state.isMenuOpened
-          <li>
+    });
-            <a
+  }
+
+  render() {
+    const { disableSettings } = this.props;
+    return (
+      <header className={this.state.isMenuOpened ? 'opened' : null}>
+        <nav id='top-nav'>
+
+          <Media query='(min-width: 735px)'>
+            <Fragment>
+              <Link className='home-link' to='/'>
+                <NavLogo />
+              </Link>
+              {disableSettings
+                ? null
+                : <div className="header-search">
+                  <FCCSearch />
+                </div>
+              }
+            </Fragment>
+          </Media>
+
+          <ul id='top-right-nav'>
+            <li>
+              <Link to='/learn'>Curriculum</Link>
+            </li>
+            <li>
+              <a
               href='/forum'
               rel='noopener noreferrer'
               target='_blank'
               >
-              Forum
+                Forum
-            </a>
+              </a>
-          </li>
+            </li>
-          <li>
+            <li>
-            <a
+              <a
               href='/news'
               rel='noopener noreferrer'
               target='_blank'
               >
-              News
+                News
-            </a>
+              </a>
-          </li>
+            </li>
-          <li className='user-state-link'>
+            <li className='user-state-link'>
-            <UserState disableSettings={disableSettings} />
+              <UserState disableSettings={disableSettings} />
-          </li>
+            </li>
-        </ul>
+          </ul>
-      </nav>
+        </nav>
-    </header>
+
-  );
+        <Media query='(max-width: 734px)'>
+          <div className="mobile-menu">
+            <Link className='home-link' to='/'>
+              <NavLogo />
+            </Link>
+            {disableSettings
+              ? null
+              : <div className="header-search">
+                  <FCCSearch />
+                </div>
+            }
+            <span className="menu-button" onClick={this.toggleClass}>
+              Menu
+            </span>
+          </div>
+        </Media>
+
+      </header>
+    );
+  }
 }
 
 Header.propTypes = {

client/src/components/layouts/global.css

@@ -2,6 +2,7 @@
   max-height: 100%;
   height: 70px;
   font-size: 40px;
+  white-space: normal;
 }
 
 .big-heading {

client/src/components/layouts/guide.css

@@ -95,7 +95,7 @@
 
 @media (max-width: 400px) {
   .fcc_searchBar .ais-Hits {
-    width: 80%;
+    width: 100%;
   }
 }
 
@@ -150,7 +150,7 @@
   margin-right: 10px;
 }
 
-@media (min-width: 992px) {
+@media (min-width: 735px) {
   .logo-glyph {
     display: none;
   }