navbar done

README.md

@@ -54,7 +54,7 @@ Free meal planner for cooks short on ideas! (like me …)
 - Notation system: know what are the most loved meals
 - Share recipe with your friends and family
 - Suggestions based on what your personal taste
-- Recipes in Video
+- Recipes in Video ✓
 - Get a full menu (Starter, Main, Dessert + Cocktail)
 - Send a daily suggestion to newsletter
 - History
@@ -95,7 +95,6 @@ Free meal planner for cooks short on ideas! (like me …)
 
 ## TO DO
 
-1. add sidenav on mobile
 1. send message after contact form validation (confirm to sender and msg+info to admin)
 1. Design & Breadcrumb
 1. Cookie bar

src/components/Navbar.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { useAuth0 } from "../utils/auth0-spa";
 import { Logo } from "./Logo";
 import { RandomButton } from "./RandomButton";
@@ -20,7 +21,7 @@ export const Navbar = props => {
               {links.map((link, i) => (
                 <FooterLink key={i} link={link} />
               ))}
-              <li>{isAuthenticated && <FooterLink link="profile" />}</li>
+              {isAuthenticated && <FooterLink link="profile" />}
               <li>
                 <RandomButton
                   handleClick={props.handleClick}
@@ -30,15 +31,14 @@ export const Navbar = props => {
               </li>
               <li>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</li>
             </ul>
-            <a
+            <Link
-              href="#"
+              to="#"
               data-target="slide-out"
-              class="sidenav-trigger "
+              className="sidenav-trigger "
               onClick={openNavClick}
-              // onclick="openNav()"
             >
-              <i class="material-icons">menu</i>
+              <i className="material-icons">menu</i>
-            </a>
+            </Link>
           </div>
         </div>
       </nav>

src/components/SideNav.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
+import { Link } from "react-router-dom";
 import { useAuth0 } from "../utils/auth0-spa";
-// import { Logo } from "./Logo";
 import { RandomButton } from "./RandomButton";
 import { FooterLink } from "./FooterLink";
 import { LogInButton } from "./LogInButton";
@@ -8,7 +8,7 @@ import { LogOutButton } from "./LogOutButton";
 
 export const SideNav = props => {
   const { showNav, closeNavClick, links } = props;
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated, user } = useAuth0();
   let transformStyle = {
     transform: showNav ? "translateX(0%)" : "translateX(-105%)",
     transition: "0.5s"
@@ -18,18 +18,14 @@ export const SideNav = props => {
     <>
       <ul id="slide-out" className="sidenav" style={transformStyle}>
         <li>
-          <a>
+          <div className="user-view" style={{ height: "30vh" }}>
-            <i className="material-icons" onClick={closeNavClick}>
-              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) */,
+                  height: "30vh" /* Full width (cover the whole page) */,
                   top: "0",
                   left: "0",
                   right: "0",
@@ -44,45 +40,54 @@ export const SideNav = props => {
                 alt="sidenav_background"
               />
             </div>
-            <a href="#user">
+
+            <i className="material-icons right" onClick={closeNavClick}>
+              close
+            </i>
+
+            {isAuthenticated ? (
+              <Link to="/profile">
+                <img className="circle" src={user.picture} alt="user_avatar" />
+                <span className="white-text name">{user.name}</span>
+                <span className="white-text email">{user.email}</span>
+              </Link>
+            ) : (
+              // <Link to="/profile">
               <img
                 className="circle"
                 src={require("../images/chef.svg")}
                 alt="user_avatar"
               />
-            </a>
+              // </Link>
-            <a href="#name">
+            )}
-              <span className="white-text name">John Doe</span>
-            </a>
-            <a href="#email">
-              <span className="white-text email">jdandturk@gmail.com</span>
-            </a>
           </div>
         </li>
 
         <li>
-          <a>
+          <RandomButton
-            <RandomButton
+            handleClick={props.handleClick}
-              handleClick={props.handleClick}
+            url={props.buttonUrl}
-              url={props.buttonUrl}
+            size="small"
-              size="small"
+          />
-            />
-          </a>
         </li>
         <li>
-          <a>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</a>
+          <Link to="#">
+            {!isAuthenticated ? <LogInButton /> : <LogOutButton />}
+          </Link>
         </li>
 
         <li>
           <div className="divider"></div>
         </li>
         <li>
-          <a className="subheader">Navigation</a>
+          <Link to="#" className="subheader">
+            Navigation
+          </Link>
         </li>
         {links.map((link, i) => (
           <FooterLink key={i} link={link} />
         ))}
-        <li>{isAuthenticated && <FooterLink link="profile" />}</li>
+        {isAuthenticated && <FooterLink link="profile" />}
       </ul>
     </>
   );

src/pages/App.jsx

@@ -115,6 +115,7 @@ export const App = () => {
     ev.preventDefault();
     setShowNav(true);
     document.addEventListener("keydown", handleEscKey);
+    // document.addEventListener("click", handleOutsideClick);
   };
   const closeNavClick = ev => {
     ev.preventDefault();
@@ -126,6 +127,9 @@ export const App = () => {
       setShowNav(false);
     }
   };
+  // const handleOutsideClick = ev => {
+  //   console.log(ev);
+  // };
 
   const links = ["categories", "contact"];
 

src/pages/Profile.jsx

@@ -22,6 +22,7 @@ export const Profile = () => {
         <p>
           <b>Email: </b>
           {user.email}
+          {/* <a href={`mailto:${user.email}`}>{user.email}</a> */}
         </p>
         {/* <code>{JSON.stringify(user, null, 2)}</code> */}
       </div>