navbar skeleton ++

src/components/Footer.jsx

@@ -14,7 +14,7 @@ export const Footer = () => {
             <h5 className="white-text">Navigation</h5>
             <ul>
               {links.map((link, i) => (
-                <FooterLink key={i} link={link} />
+                <FooterLink key={i} link={link} textColor="grey" />
               ))}
             </ul>
           </div>

src/components/FooterLink.jsx

@@ -2,10 +2,14 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { upFirstChar } from "../utils/methods";
 
-export const FooterLink = ({ link }) => {
+export const FooterLink = ({ link, textColor = "" }) => {
+  const textColorClass = `${textColor}-text`;
   return (
     <li>
-      <Link className="grey-text text-lighten-3" to={`/${link}`}>
+      <Link
+        className={`${textColorClass} waves-effect text-lighten-3`}
+        to={`/${link}`}
+      >
         {upFirstChar(link)}
       </Link>
     </li>

src/components/Navbar.jsx

@@ -8,8 +8,8 @@ import { LogOutButton } from "./LogOutButton";
 
 export const Navbar = props => {
   const { isAuthenticated } = useAuth0();
-  const links = ["categories", "contact"];
+
-  const { openNavClick } = props;
+  const { openNavClick, links } = props;
   return (
     <div className="navbar-fixed">
       <nav>
@@ -35,6 +35,7 @@ export const Navbar = props => {
               data-target="slide-out"
               class="sidenav-trigger "
               onClick={openNavClick}
+              // onclick="openNav()"
             >
               <i class="material-icons">menu</i>
             </a>

src/components/SideNav.jsx

@@ -1,58 +1,88 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { useAuth0 } from "../utils/auth0-spa";
-// import { useAuth0 } from "../utils/auth0-spa";
 // import { Logo } from "./Logo";
-// import { RandomButton } from "./RandomButton";
+import { RandomButton } from "./RandomButton";
-// import { FooterLink } from "./FooterLink";
+import { FooterLink } from "./FooterLink";
-// import { LogInButton } from "./LogInButton";
+import { LogInButton } from "./LogInButton";
-// import { LogOutButton } from "./LogOutButton";
+import { LogOutButton } from "./LogOutButton";
 
 export const SideNav = props => {
-  const { showNav } = props;
+  const { showNav, closeNavClick, links } = props;
-
+  const { isAuthenticated } = useAuth0();
   let transformStyle = {
-    transform: showNav ? "translateX(0%)" : "translateX(-105%)"
+    transform: showNav ? "translateX(0%)" : "translateX(-105%)",
+    transition: "0.5s"
   };
-  // let sideNavStyle = { width: showNav ? "250px" : "0" };
 
   return (
     <>
-      <ul id="slide-out" class="sidenav" style={transformStyle}>
+      <ul id="slide-out" className="sidenav" style={transformStyle}>
         <li>
-          <div class="user-view">
+          <a>
-            <div class="background">
+            <i className="material-icons" onClick={closeNavClick}>
-              <img src={require("../images/chef.svg")} />
+              close
+            </i>
+          </a>
+          <div className="user-view">
+            <div className="background">
+              <img
+                // className="responsive-img"
+                style={{
+                  position: "fixed" /* Sit on top of the page content */,
+                  width: "100%" /* Full width (cover the whole page) */,
+                  top: "0",
+                  left: "0",
+                  right: "0",
+                  bottom: "0",
+                  backgroundColor:
+                    "rgba(0,0,0,0.5)" /* Black background with opacity */,
+                  zIndex:
+                    "2" /* Specify a stack order in case you're using a different order for other elements */
+                  // cursor: "pointer" /* Add a pointer on hover */
+                }}
+                src={require("../images/special_event.svg")}
+                alt="sidenav_background"
+              />
             </div>
             <a href="#user">
-              <img class="circle" src={require("../images/chef.svg")} />
+              <img
+                className="circle"
+                src={require("../images/chef.svg")}
+                alt="user_avatar"
+              />
             </a>
             <a href="#name">
-              <span class="white-text name">John Doe</span>
+              <span className="white-text name">John Doe</span>
             </a>
             <a href="#email">
-              <span class="white-text email">jdandturk@gmail.com</span>
+              <span className="white-text email">jdandturk@gmail.com</span>
             </a>
           </div>
         </li>
+
         <li>
-          <a href="#!">
+          <a>
-            <i class="material-icons">cloud</i>First Link With Icon
+            <RandomButton
+              handleClick={props.handleClick}
+              url={props.buttonUrl}
+              size="small"
+            />
           </a>
         </li>
         <li>
-          <a href="#!">Second Link</a>
+          <a>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</a>
+        </li>
+
+        <li>
+          <div className="divider"></div>
         </li>
         <li>
-          <div class="divider"></div>
+          <a className="subheader">Navigation</a>
-        </li>
-        <li>
-          <a class="subheader">Subheader</a>
-        </li>
-        <li>
-          <a class="waves-effect" href="#!">
-            Third Link With Waves
-          </a>
         </li>
+        {links.map((link, i) => (
+          <FooterLink key={i} link={link} />
+        ))}
+        <li>{isAuthenticated && <FooterLink link="profile" />}</li>
       </ul>
     </>
   );

src/pages/App.jsx

@@ -127,6 +127,8 @@ export const App = () => {
     }
   };
 
+  const links = ["categories", "contact"];
+
   return loading ? (
     <div className="container center-align valign-wrapper">
       <PreLoader />
@@ -139,6 +141,7 @@ export const App = () => {
             handleClick={getRandomMeal}
             buttonUrl={buttonUrl}
             openNavClick={openNavClick}
+            links={links}
           />
 
           <SearchBar
@@ -146,7 +149,12 @@ export const App = () => {
             handleChange={handleChange}
             onSubmit={getSearchResults}
           />
-          <SideNav showNav={showNav} />
+          <SideNav
+            showNav={showNav}
+            closeNavClick={closeNavClick}
+            links={links}
+            buttonUrl={buttonUrl}
+          />
         </header>
 
         <Switch>