Merge pull request #27 from Iraq-WBC-Capstones-2020/13-Navbar

add navbar

package.json

@@ -4,15 +4,20 @@
   "private": true,
   "author": "Re:Coded",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "classnames": "^2.2.6",
     "framer-motion": "^2.3.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-swipeable": "^5.5.1",
     "tailwindcss": "^1.5.2"
   },
   "scripts": {

src/App.js

@@ -25,7 +25,7 @@ const DefaultRoutes = () => {
         <Route path="/workouts" component={Workouts} />
         <Route path="/about" component={About} />
         <Route path="/blogs" component={Blogs} />
-        <Redirect to="notfound" />
+        <Redirect to="/notfound" />
       </Switch>
       <Footer />
     </>
@@ -35,13 +35,15 @@ const DefaultRoutes = () => {
 function App() {
   return (
     <>
-      <Router>
-        <Switch>
-          <Route component={NotFound} path="/notfound" />
-          <Route exact path="/" component={LandingPage} />
-          <Route component={DefaultRoutes} />
-        </Switch>
-      </Router>
+      <div className="">
+        <Router>
+          <Switch>
+            <Route component={NotFound} path="/notfound" />
+            <Route exact path="/" component={LandingPage} />
+            <Route component={DefaultRoutes} />
+          </Switch>
+        </Router>
+      </div>
     </>
   );
 }

src/components/Navbar/Navbar.js

@@ -1,7 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Toolbar from './Toolbar';
+import SideNav from './SideNav';
 
 const Navbar = () => {
-  return <div>Navbar</div>;
+  const [navbarOpen, setNavbarOpen] = useState(false);
+
+  const handleToggleMenuClick = () => {
+    setNavbarOpen((prevState) => !prevState);
+  };
+  const handleCloseNavbar = () => {
+    setNavbarOpen(false);
+  };
+  return (
+    <div data-testid="navbar">
+      <Toolbar
+        navbarOpen={navbarOpen}
+        handleToggleMenuClick={handleToggleMenuClick}
+      />
+
+      <SideNav
+        handleToggleMenuClick={handleToggleMenuClick}
+        navbarOpen={navbarOpen}
+        handleCloseNavbar={handleCloseNavbar}
+      />
+    </div>
+  );
 };
 
 export default Navbar;

src/components/Navbar/Navbar.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Navbar from './Navbar';
+import { BrowserRouter as Router } from 'react-router-dom';
+test('renders learn react link', () => {
+  const { getByTestId } = render(
+    <Router>
+      <Navbar />
+    </Router>
+  );
+  const textElement = getByTestId('navbar');
+  expect(textElement).toBeInTheDocument();
+});

src/components/Navbar/SideNav.css

@@ -0,0 +1,9 @@
+.side-nav {
+  transition: transform 0.4s ease-out;
+  transform: translateX(100%);
+}
+
+.side-nav.open {
+  transform: translateX(0px);
+  box-shadow: 0px 0px 15px #232931;
+}

src/components/Navbar/SideNav.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import './SideNav.css';
+import { Link } from 'react-router-dom';
+import { Swipeable } from 'react-swipeable';
+import PropTypes from 'prop-types';
+const SideNav = ({ navbarOpen, handleToggleMenuClick, handleCloseNavbar }) => {
+  const sideNavClasses = navbarOpen ? 'side-nav open' : 'side-nav';
+  return (
+    <Swipeable onSwiped={handleCloseNavbar}>
+      <nav
+        className={
+          `bg-darkgray h-screen w-3/4 md:w-2/4  fixed top-0 right-0 z-10 text-secondary lg:hidden flex flex-col justify-evenly ` +
+          sideNavClasses
+        }
+      >
+        <button
+          className="m-3  absolute top-0 left-0"
+          onClick={() => handleToggleMenuClick()}
+        >
+          <FontAwesomeIcon icon={faTimes} />
+        </button>
+        <ul className="h-64 flex flex-col justify-evenly items-center">
+          <li>
+            <Link onClick={handleCloseNavbar} to="/home" className="font-bold">
+              HOME
+            </Link>
+          </li>
+
+          <li>
+            <Link
+              onClick={handleCloseNavbar}
+              to="/workouts"
+              className="font-bold"
+            >
+              WORKOUTS
+            </Link>
+          </li>
+
+          <li>
+            <Link onClick={handleCloseNavbar} to="/meals" className="font-bold">
+              MEALS
+            </Link>
+          </li>
+
+          <li>
+            <Link onClick={handleCloseNavbar} to="/about" className="font-bold">
+              ABOUT
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </Swipeable>
+  );
+};
+SideNav.propTypes = {
+  navbarOpen: PropTypes.bool.isRequired,
+  handleToggleMenuClick: PropTypes.func.isRequired,
+  handleCloseNavbar: PropTypes.func.isRequired,
+};
+export default SideNav;

src/components/Navbar/Toolbar.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Link, useLocation } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+const Toolbar = ({ navbarOpen, handleToggleMenuClick }) => {
+  const location = useLocation();
+  const isDark =
+    location.pathname === '/home' || location.pathname === '/about';
+  const navLinksStyle = classNames(
+    'px-3 py-2 flex items-center text-sm md:text-lg  uppercase font-bold  leading-snug',
+    {
+      'text-secondary lg:hover:bg-primary': isDark,
+      'text-primary lg:hover:bg-darkgray': !isDark,
+    }
+  );
+  return (
+    <>
+      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-transparent navbar-expand-lg  ">
+        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
+          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
+            <a
+              className={classNames(
+                'lg:text-2xl font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-secondary',
+                { 'text-darkgray': !isDark }
+              )}
+            >
+              Train to{' '}
+              <div className="inline-block">
+                maintain
+                <hr className="border-0 h-1 bg-primary" />
+              </div>
+            </a>
+            <button
+              className={classNames(
+                `text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none text-secondary`,
+                { 'text-darkgray': !isDark }
+              )}
+              type="button"
+              onClick={() => handleToggleMenuClick()}
+            >
+              <FontAwesomeIcon icon={navbarOpen ? faTimes : faBars} />
+            </button>
+          </div>
+          <div className={' hidden lg:flex flex-grow items-center'}>
+            <ul className=" flex flex-col lg:flex-row list-none lg:ml-auto">
+              <li className="nav-item">
+                <Link to="/home" className={navLinksStyle}>
+                  Home
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link className={navLinksStyle}>Workouts</Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/meals" className={navLinksStyle}>
+                  Meals
+                </Link>
+              </li>
+
+              <li className="nav-item">
+                <Link to="/about" className={navLinksStyle}>
+                  about
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </>
+  );
+};
+
+Toolbar.propTypes = {
+  navbarOpen: PropTypes.bool.isRequired,
+  handleToggleMenuClick: PropTypes.func.isRequired,
+};
+export default Toolbar;