Merge pull request #37 from microsoft/won

Mobile navigation

Client/src/components/Layout/Header/Header.scss

@@ -3,8 +3,49 @@
 .header-root {
   height: 90px;
   padding: 20px;
+  width: 100%;
   display: flex;
   flex-direction: row;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: $default-color;
+  z-index: 10000;
+
+  @media(prefers-color-scheme: dark) {
+    background-color: $background-dark;
+  }
+}
+
+.header-mobile-menu {
+  cursor: pointer;
+  border: 2px solid $background-light;
+  width: 50px;
+  height: 50px;
+  background: none;
+  margin-right: 20px;
+  margin-left: -10px;
+  z-index: 10000;
+
+  @media(min-width: 1070px) {
+    display: none;
+  }
+
+  @media(prefers-color-scheme: dark) {
+    border: 2px solid $background-dark;
+  }
+}
+
+.header-mobile-bar {
+  margin: 7.5px 0;
+  width: 35px;
+  height: 3px;
+  background-color: $font-text-light;
+  transition: 0.4s;
+
+  @media(prefers-color-scheme: dark) {
+    background-color: $font-text-dark;
+  }
 }
 
 .header-logo {
@@ -16,6 +57,38 @@
 
 .nav-container {
   margin-left: 50px;
+  display: none;
+
+  &.show-mobile-menu {
+    display: block;
+    position: fixed;
+    top: 90px;
+    left: 0;
+    margin-left: 0;
+    width: 100%;
+    border-bottom: 1px solid $border-color-light;
+
+    @media(prefers-color-scheme: dark) {
+      border-bottom: 1px solid $border-color-dark;
+    }
+
+    .nav-list {
+      flex-direction: column;
+      background-color: $default-color;
+
+      @media(prefers-color-scheme: dark) {
+        background-color: $background-dark;
+      }
+
+      .nav-list-item {
+        margin-left: 20px;
+      }
+    }
+  }
+
+  @media(min-width: 1070px) {
+    display: block !important;
+  }
 }
 
 .nav-list {

Client/src/components/Layout/Header/Header.tsx

@@ -3,8 +3,31 @@ import { Link } from "react-router-dom";
 import "./Header.scss";
 
 export function Header(): React.ReactElement {
+  const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false);
+
+  const handleMobileMenuButtonClicked = () => {
+    setShowMobileMenu(!showMobileMenu);
+  };
+
+  const navContainerClassNames = ["nav-container"];
+  if (showMobileMenu) {
+    navContainerClassNames.push("show-mobile-menu");
+  }
+
   return (
     <header className="header-root">
+      <button
+        className="header-mobile-menu"
+        title="Toggle menu"
+        aria-expanded={showMobileMenu}
+        aria-haspopup="menu"
+        onClick={handleMobileMenuButtonClicked}
+      >
+        <div className="header-mobile-bar"></div>
+        <div className="header-mobile-bar"></div>
+        <div className="header-mobile-bar"></div>
+      </button>
+
       <div className="brand-container">
         <Link to="/" title="Go to CareerCraft Home page" className="brand">
           <img
@@ -15,7 +38,7 @@ export function Header(): React.ReactElement {
         </Link>
       </div>
 
-      <nav className="nav-container">
+      <nav className={navContainerClassNames.join(" ")}>
         <ul className="nav-list">
           <li className="nav-list-item">
             <Link to="/" title="Go to Career game page">

Client/src/components/Layout/Layout.scss

@@ -5,7 +5,8 @@
 .content-container {
   display: flex;
   flex-direction: row;
-  height: calc(100% - 90px);
+  padding-top: 90px;
+  height: 100%;
 }
 
 .main-container {

Client/src/index.scss

@@ -29,6 +29,9 @@ input {
 
 a {
   color: $primary-color;
+  @media (prefers-color-scheme: dark) {
+    color: $primary-color-dark;
+  }
 }
 
 a,

Client/src/variables.scss

@@ -1,5 +1,6 @@
 // Primary colors
 $primary-color: #1F76A7;
+$primary-color-dark: #4dabf5;
 $default-color: white;
 $error-color: #d32f2f;
 
@@ -10,7 +11,7 @@ $border-color-light: #e0e0e0;
 $input-background-light: white;
 
 // Dark theme colors
-$background-dark: rgba(0, 0, 0, 0.9);
+$background-dark: #000000e6;
 $font-text-dark: white;
 $border-color-dark: #333;
 $input-background-dark: #222;