feat: add sidebar for mobile display

ShahAnuj2610 · Mar 29, 2020 · 8c1907b · 8c1907b
1 parent d056952
commit 8c1907b
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 41 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,16 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
     <title>Tomato App</title>
   </head>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var elems = document.querySelectorAll(".sidenav");
+      var instances = M.Sidenav.init(elems);
+    });
+  </script>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.

diff --git a/client/src/components/layout/NavBarList.js b/client/src/components/layout/NavBarList.js
@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+import * as PropTypes from "prop-types";
+import React from "react";
+
+export function NavBarList(props) {
+  return (
+    <>
+      <li>
+        <Link to="/restaurants/create">Create Restaurants And Meals</Link>
+      </li>
+
+      <li>
+        <Link to="/restaurants">All Restaurants</Link>
+      </li>
+      <li>
+        <Link to="/orders">Your Orders</Link>
+      </li>
+      <li>
+        <b>Hey there,</b> {(props.user.name || "").split(" ")[0]}
+      </li>
+      <li>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a onClick={props.onClick}>Logout</a>
+      </li>
+    </>
+  );
+}
+
+NavBarList.propTypes = {
+  user: PropTypes.any,
+  onClick: PropTypes.func
+};
diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
@@ -4,6 +4,7 @@ import { logoutUser } from "../../actions/authActions";
 import { Link } from "react-router-dom";
 
 import "./index.css";
+import { NavBarList } from "./NavBarList";
 
 class NavBar extends Component {
   onLogoutClick = e => {
@@ -13,41 +14,34 @@ class NavBar extends Component {
   render() {
     const { user } = this.props.auth;
     return (
-      <div className="navbar-fixed">
-        <nav className="z-depth-0">
-          <div className="nav-wrapper">
-            <Link to="/" className="brand-logo">
-              <i className="material-icons">code</i>Tomato
-            </Link>
-            {Object.keys(user || {}).length !== 0 ? (
-              <ul
-                id="nav-mobile"
-                className="right hide-on-med-and-down list-margin"
+      <React.Fragment>
+        <div className="navbar-fixed">
+          <nav className="z-depth-0">
+            <div className="nav-wrapper">
+              <Link to="/" className="brand-logo">
+                <i className="material-icons">code</i>Tomato
+              </Link>
+              <div
+                data-target="mobile-demo"
+                className="sidenav-trigger show-on-med-and-down"
               >
-                <li>
-                  <Link to="/restaurants/create">
-                    Create Restaurants And Meals
-                  </Link>
-                </li>
-
-                <li>
-                  <Link to="/restaurants">All Restaurants</Link>
-                </li>
-                <li>
-                  <Link to="/orders">Your Orders</Link>
-                </li>
-                <li>
-                  <b>Hey there,</b> {(user.name || "").split(" ")[0]}
-                </li>
-                <li>
-                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                  <a onClick={this.onLogoutClick}>Logout</a>
-                </li>
-              </ul>
-            ) : null}
-          </div>
-        </nav>
-      </div>
+                <i className="material-icons">menu</i>
+              </div>
+              {Object.keys(user || {}).length !== 0 ? (
+                <ul
+                  id="nav-mobile"
+                  className="right hide-on-med-and-down list-margin"
+                >
+                  <NavBarList user={user} onClick={this.onLogoutClick} />
+                </ul>
+              ) : null}
+            </div>
+          </nav>
+        </div>
+        <ul className="sidenav" id="mobile-demo">
+          <NavBarList user={user} onClick={this.onLogoutClick} />
+        </ul>
+      </React.Fragment>
     );
   }
 }

diff --git a/client/src/components/layout/index.css b/client/src/components/layout/index.css
@@ -1,3 +1,13 @@
 .list-margin li {
   margin-right: 10px;
 }
+
+.show-on-med-and-down {
+  display: none;
+}
+
+@media only screen and (max-width: 992px) {
+  .show-on-med-and-down {
+    display: block;
+  }
+}