Make the upper navbar mobile responsive

client/src/components/HeroSection.jsx

@@ -4,7 +4,7 @@ import { spinner } from '../assets';
 const HeroSection = () => {
   return (
     <div className="h-screen w-full flex justify-center">
-      <div className='mt-2 h-[80%] w-[95%] max-w-8xl bg-[url(./assets/hero.jpg)] bg-cover bg-center'>
+      <div className='h-[80%] w-full max-w-8xl bg-[url(./assets/hero.jpg)] bg-cover bg-center'>
         <img src={spinner} className='absolute w-[20%] invisible md:visible ml-[75%] mt-[15%] animate-spin-slow'/>
         <div className='w-full h-[70%]'></div>
         <div className='w-full h-[30%] bg-dark-gray'>

client/src/components/Navbar.jsx

@@ -1,27 +1,209 @@
-import React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { logo } from '../assets';
 import { Link } from 'react-router-dom'
 import { Link as ScrollLink} from "react-scroll";
 
-const Navbar = ({isLoggedIn}) => {
+import { LuX, LuAlignJustify } from 'react-icons/lu';
+import useClickOutside from '../hooks/useClickoutSide';
+
+const navList = [
+    {
+        id: 1,
+        listName: 'Products',
+        scrollTo: 'products'
+    },
+    {
+        id: 2,
+        listName: 'About us',
+        scrollTo: 'about_us'
+    },
+
+]
+const Navbar = ({ isLoggedIn }) => {
+    const [toggleNav, setToggleNav] = useState(false);
+
+    const [activateHeader, setActivateHeader] = useState(false);
+
+    const handleToggleNav = useCallback(() => {
+        setToggleNav((value) => !value);
+    }, []);
+
+    const navRef = useClickOutside(() => setToggleNav(false));
+    useEffect(() => {
+        const handleScroll = () => {
+          if (window.scrollY > 100) {
+            setActivateHeader(true);
+          } else {
+            setActivateHeader(false);
+          }
+
+        }
+
+
+        // add evenListener to activate header
+        window.addEventListener('scroll', handleScroll);
+
+        // cleanup function
+        return () => {
+          window.removeEventListener('scroll', handleScroll)
+        }
+      }, []);
     return (
-        <nav id="navbar">
-            <div className="w-full flex flex-row justify-between mt-[1%]">
-                <Link to='/'>
+        <header
+            id="navbar"
+            className={`
+                py-[20px]
+                md:py-[10px]
+                fixed
+                top-0
+                left-0
+                w-full
+                z-[4]
+                ${activateHeader && 'header-active'}
+            `}
+        >
+            <div className="px-[16px] flex items-center justify-between">
+                <Link to='/' className='flex items-center'>
                     <img
-                    src={logo}
-                    className="ml-2 md:ml-10 w-20 object-contain"
-                    alt="Logo"
+                        src={logo}
+                        width={37}
+						height={28}
+                        className="w-[60px]"
+                        alt="Logo"
                     />
                 </Link>
-            <ul className="flex flex-row gap-4 md:gap-12 mr-12 items-center">
-                {!isLoggedIn && <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><Link to='/login' smooth="true">LOG IN</Link></li>}
-                <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><ScrollLink to='products' smooth="true">PRODUCTS</ScrollLink></li>
-                <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><ScrollLink to='about_us' smooth="true">ABOUT US</ScrollLink></li>
-            </ul>
-        </div>
-        </nav>
+
+                {/* navbar */}
+                <nav
+                    ref={navRef}
+                    className={`
+                        fixed
+                        top-0
+                        right-0
+                        max-w-[350px]
+                        w-full
+                        h-[100dvh]
+                        bg-white
+                        py-[30px]
+                        px-[16px]
+                        flex
+                        flex-col
+                        z-[1]
+                        duration-500
+                        transition
+                        navbar
+                        ${toggleNav ? 'translate-x-0' : 'translate-x-full'}
+                    `}
+                >
+                    {/* navbar top */}
+                    <div className="flex items-center justify-between md:hidden">
+                        <Link to='/' className='flex items-center'>
+                            <img
+                                src={logo}
+                                width={37}
+                                height={28}
+                                className="w-[60px]"
+                                alt="Logo"
+                            />
+                        </Link>
+                        <button
+							aria-label="close menu"
+							className="text-3xl"
+                            onClick={handleToggleNav}
+                        >
+							<LuX />
+						</button>
+                    </div>
+
+                    {/* navbar list */}
+
+                    <ul className="mt-[50px] md:flex md:mx-auto md:gap-[30px] md:mt-0 ">
+                        {navList.map((list) => (
+                            <li
+
+                                key={list.id}
+                                className='
+                                relative
+
+                                cursor-pointer
+                                text-lg
+                                capitalize
+                                md:uppercase
+                                font-semibold
+                                py-[8px]
+                                hover:font-bold
+                                '
+                            >
+                                <ScrollLink onClick={handleToggleNav} offset={-100} to={list.scrollTo} smooth="true">
+                                    {list.listName}
+                                </ScrollLink>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <div
+						className="
+                            mt-auto
+                            pt-[20px]
+                            md:pt-0
+                            border-t-2
+                            md:border-t-0
+                            md:ml-0
+                            flex
+                            justify-around
+                            items-center
+                        "
+                    >
+                        {!isLoggedIn && (
+                            <Link
+                            to="/login"
+                            className="
+                                btn btn-primary
+                            ">
+                                Login
+                            </Link>
+                        )}
+
+                    </div>
+                </nav>
+
+                <button
+                    aria-label='open menu'
+                    onClick={handleToggleNav}
+                    className='text-3xl  md:hidden'
+                >
+                    <LuAlignJustify />
+                </button>
+                {/* overlay */}
+                {toggleNav && (
+                <div
+                    className={`
+                    fixed
+                    top-0
+                    left-0
+                    bottom-0
+                    w-full
+                    bg-white
+                    opacity-50
+                    ease
+                    duration-300
+                    transition-all
+                    md:hidden
+                    `}
+                />
+                 )} 
+            </div>
+        </header>
         );
 }
 
-export default Navbar
+export default Navbar
+
+
+/*
+<ul className="mt-[50px]">
+    {!isLoggedIn && <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><Link to='/login' smooth="true">LOG IN</Link></li>}
+    <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><ScrollLink to='products' smooth="true">PRODUCTS</ScrollLink></li>
+    <li className="cursor-pointer text-xs md:text-lg transition-all hover:font-bold"><ScrollLink to='about_us' smooth="true">ABOUT US</ScrollLink></li>
+</ul>
+*/

client/src/hooks/useClickoutSide.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+
+type ClickOutsideCallback = () => void;
+
+export default function useClickOutside (callbackFun: ClickOutsideCallback) {
+
+  const domNodeRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+
+    const handler = (event: MouseEvent) => {
+      if (domNodeRef.current && !domNodeRef.current.contains(event.target as Node)) {
+        callbackFun()
+      }
+    }
+
+    document.addEventListener('mousedown', handler)
+
+    return () => {
+      document.removeEventListener("mousedown", handler)
+    }
+  }, [callbackFun]);
+
+  return domNodeRef;
+}

client/src/index.css

@@ -31,4 +31,30 @@
   background-color: #161516;
   transform-origin: top;
   z-index: 100;
+}
+
+@media (min-width: 992px) {
+  .navbar {
+    all: unset;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+}
+@layer components {
+
+  .btn {
+    @apply h-[50px] text-white px-[30px] rounded-lg flex items-center justify-center gap-[10px] max-w-max ease-in duration-300
+  }
+
+  .btn-primary {
+    @apply bg-bg-majorelle-blue rounded-[200px] hover:bg-bg-ocean-blue shadow-shadow-2
+  }
+
+  .btn-secondary {
+    @apply bg-bg-red-salsa hover:bg-bg-english-vermillion shadow-shadow-3
+  }
+  .header-active {
+    @apply fixed bg-white animate-slideIn shadow-shadow-1
+  }
 }

client/tailwind.config.js

@@ -11,11 +11,31 @@ export default {
       },
       colors: {
         'blue':'#6A7FDB',
-        'pink':'#B6174B',
+        'pink': '#B6174B',
+        'bg-majorelle-blue': 'hsl(249, 95%, 63%)',
+        'bg-ocean-blue' : 'hsl(249, 63%, 54%)',
         'white':'#F8FAF8',
         'black':'#000000',
         'dark-gray':'#161516',
         'green':'#2DE1C2',
+      },
+      boxShadow: {
+        'shadow-1' : '0 2px 10px hsla(209, 40%, 14%, 10%)',
+        'shadow-2' : '0 5px 10px hsla(249, 95%, 63%, 25%)',
+      },
+      animation: {
+        'dropShadow': ' dropShadow 800ms ease-in-out infinite alternate',
+        'slideIn': 'slideIn 500ms ease forwards'
+      },
+      keyframes: {
+        'dropShadow': {
+          '0%': { width: '40%' },
+          '100%': { width: '80%' }
+        },
+        'slideIn': {
+          '0%': { transform: 'translateY(-100px)'},
+          '100%': { transform: 'translateY(0px)'}
+        }
       }
     },
     animation: {

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-icons": "^4.11.0"
+  }
+}