adding or fixing some animations. Also working on menu's bug

.env

@@ -0,0 +1,2 @@
+REACT_APP_AUTH0_DOMAIN="dev-l4azhufskyyzfiyg.us.auth0.com"
+REACT_APP_AUTH0_CLIENT_ID="KqMHxUPyjUeWQDVRDJEhA8JJKjVm4j2K"

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
@@ -15,7 +16,7 @@
     "react-paginate": "^8.1.4",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "reactstrap": "^9.0.1",
     "redux-logger": "^3.0.6",
     "remixicon": "^2.5.0",

src/App.js

@@ -1,6 +1,14 @@
 import Layout from "./components/Layout/Layout";
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
 
 function App() {
+  const { user } = useAuth0();
+
+  React.useEffect(() => {
+    console.log(user);
+  });
+
   return <Layout />;
 }
 

src/components/Header/Header.jsx

@@ -1,34 +1,16 @@
 import React, { useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-
 import { Container } from "reactstrap";
-import logo from "../../assets/images/res-logo.png";
-import { NavLink, Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 
 import { cartUiActions } from "../../store/shopping-cart/cartUiSlice";
+import logo from "../../assets/images/res-logo.png";
+import Login from "./Login";
+import { nav__links } from "../../data/navLinks";
 
 import "../../styles/header.css";
 
-const nav__links = [
-  {
-    display: "Home",
-    path: "/home",
-  },
-  {
-    display: "Foods",
-    path: "/pizzas",
-  },
-  {
-    display: "Cart",
-    path: "/cart",
-  },
-  {
-    display: "Contact",
-    path: "/contact",
-  },
-];
-
 const Header = () => {
   const menuRef = useRef(null);
   const headerRef = useRef(null);
@@ -42,8 +24,6 @@ const Header = () => {
     dispatch(cartUiActions.toggle());
   };
 
-  console.log(menuRef?.current?.classList.value);
-
   useEffect(() => {
     window.addEventListener("scroll", () => {
       if (
@@ -95,11 +75,12 @@ const Header = () => {
 
           {/* ======== nav right icons ========= */}
           <div className="nav__right d-flex align-items-center gap-4">
+            <Login />
             <span className="cart__icon" onClick={toggleCart}>
               <i className="ri-shopping-basket-line"></i>
               <span className="cart__badge">{totalQuantity}</span>
             </span>
-            
+
             <span className="mobile__menu" onClick={toggleMenu}>
               <i className="ri-menu-line"></i>
             </span>

src/components/Header/Login.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const Login = () => {
+  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
+    useAuth0();
+
+  React.useEffect(() => {
+    console.log(error);
+  }, []);
+
+  return isAuthenticated ? (
+    <div>Logout</div>
+  ) : (
+    <div onClick={() => loginWithRedirect()}>Login</div>
+  );
+};
+
+export default Login;

src/components/UI/cart/Carts.jsx

@@ -1,10 +1,10 @@
 import React from "react";
-
 import { ListGroup } from "reactstrap";
 import { Link } from "react-router-dom";
-import CartItem from "./CartItem";
 import { useDispatch, useSelector } from "react-redux";
+
 import { cartUiActions } from "../../../store/shopping-cart/cartUiSlice";
+import CartItem from "./CartItem";
 
 import "../../../styles/shopping-cart.css";
 
@@ -16,6 +16,7 @@ const Carts = () => {
   const toggleCart = () => {
     dispatch(cartUiActions.toggle());
   };
+
   return (
     <div className="cart__container" onClick={toggleCart}>
       <ListGroup onClick={(event) => event.stopPropagation()} className="cart">
@@ -24,17 +25,15 @@ const Carts = () => {
             <i className="ri-close-fill"></i>
           </span>
         </div>
-
         <div className="cart__item-list">
           {cartProducts.length === 0 ? (
             <h6 className="text-center">No item added to the cart</h6>
           ) : (
             cartProducts.map((item, index) => (
-              <CartItem item={item} key={index} onClose={toggleCart}/>
+              <CartItem item={item} key={index} onClose={toggleCart} />
             ))
           )}
         </div>
-
         <div className="cart__bottom d-flex align-items-center justify-content-between">
           <h6>
             Subtotal : <span>${totalAmount}</span>

src/data/navLinks.js

@@ -0,0 +1,18 @@
+export const nav__links = [
+  {
+    display: "Home",
+    path: "/home",
+  },
+  {
+    display: "Foods",
+    path: "/pizzas",
+  },
+  {
+    display: "Cart",
+    path: "/cart",
+  },
+  {
+    display: "Contact",
+    path: "/contact",
+  },
+];

src/index.js

@@ -8,16 +8,28 @@ import "./index.css";
 
 import store from "./store/store";
 import { Provider } from "react-redux";
+import { Auth0Provider } from "@auth0/auth0-react";
 
 import { BrowserRouter as Router } from "react-router-dom";
 
+const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+
 ReactDOM.render(
   <React.StrictMode>
-    <Router>
-      <Provider store={store}>
-        <App />
-      </Provider>
-    </Router>
+    <Auth0Provider
+      clientId={clientId}
+      domain={domain}
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+      }}
+    >
+      <Router>
+        <Provider store={store}>
+          <App />
+        </Provider>
+      </Router>
+    </Auth0Provider>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/pages/Home.jsx

@@ -1,9 +1,8 @@
 import React from "react";
-import Helmet from "../components/Helmet/Helmet.js";
-import { Container, Row, Col } from "reactstrap";
-
 import { Link } from "react-router-dom";
+import { Container, Row, Col } from "reactstrap";
 
+import Helmet from "../components/Helmet/Helmet.js";
 import guyImg from "../assets/images/delivery-guy.png";
 import "../styles/hero-section.css";
 
@@ -30,7 +29,11 @@ const Home = () => {
 
             <Col lg="6" md="6">
               <div className="hero__img">
-                <img src={guyImg} alt="delivery-guy" className="w-100" />
+                <img
+                  src={guyImg}
+                  alt="delivery-guy"
+                  className="w-100 delivery-guy"
+                />
               </div>
             </Col>
           </Row>

src/styles/header.css

@@ -5,11 +5,14 @@
   top: 0;
 }
 
-@keyframes animation {
-  from {
-    top: -100px;
+@keyframes navBarAnim {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: 20px;
   }
-  to {
+  100% {
     top: 0px;
   }
 }
@@ -21,7 +24,7 @@
   background: #fff;
   z-index: 99999;
   box-shadow: 5px 5px 15px -5px #d7d6d6;
-  animation-name: animation;
+  animation-name: navBarAnim;
   animation-duration: 0.5s;
 }
 
@@ -35,6 +38,7 @@
 
 .logo img {
   width: calc(100% - 60%);
+  aspect-ratio: 1;
   object-fit: contain;
   margin-top: -40px;
 }
@@ -93,7 +97,6 @@
   }
   .logo h5 {
     font-size: 0.8rem;
-    margin-top: -15px;
   }
 
   .navigation {
@@ -125,10 +128,7 @@
     font-size: 0.9rem;
   }
 
-  .mobile__menu {
-    display: block;
-  }
-
+  .mobile__menu,
   .show__menu {
     display: block;
   }
@@ -147,17 +147,14 @@
 
 .header__closeButton span i {
   font-size: 1.1rem;
-  background: #212245;
   padding: 5px;
   border-radius: 50%;
-  color: #fff;
+  color: #212245;
   cursor: pointer;
 }
 
-@media only screen and (max-width: 992px) {
-  .close__button {
-    display: flex;
-  }
+.close__button {
+  display: flex;
 }
 
 @media only screen and (max-width: 768px) {
@@ -181,11 +178,16 @@
   }
 }
 
+.header__closeButton {
+  display: block;
+}
+
 .close__button {
   width: fit-content;
   height: 60px;
   padding: 10px 20px;
   position: absolute;
+  display: block;
   top: 0.5rem;
   right: 0rem;
 }

src/styles/hero-section.css

@@ -41,6 +41,24 @@
   margin: 40px;
 }
 
+@keyframes deliveryGuy {
+  0% {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.delivery-guy {
+  animation-name: deliveryGuy;
+  animation-duration: 3s;
+}
+
 @media only screen and (max-width: 768px) {
   .hero__content h5 {
     font-size: 1rem;