kevos-attire/frontend/src/components/Navbar/Navbar.tsx

"use client";
import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { useMediaQuery } from "@/util/useMediaQuery";
import { FiShoppingCart } from "react-icons/fi";
import Image from "next/image";
import CartTab from "@/components/CartTab/CartTab";
import { useSelector } from "react-redux";
import type { RootState } from "@/lib/Store";
import Products from "@/app/products/page";
import type { Product } from "@/app/redux/CartReducer";

const navMotion = {
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.15,
    },
  },
  hidden: {
    opacity: 0,
  },
};

const itemMotion = {
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
};

export default function Nav() {
  const [open, setOpen] = useState(false);
  const [toggled, setToggled] = useState(false);
  const matches = useMediaQuery("(min-width: 1280px)");
  // console.log(matches);

   // get the products from the cart
   const products = useSelector((state: RootState) => state.cart.products);

  return (
    <nav className="relative mx-8 mb-10 flex justify-between items-center pt-12 font-medium md:mx-16 lg:mx-32 text-white">
      {/* <svg
        className="absolute bottom-0 left-1/2 -translate-x-1/2"
        width="250"
        height={4}
        viewBox="0 0 250 4"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M2 2L428 2" stroke="#EEEEEE" strokeLinecap="round" />
      </svg> */}
      <div>
        <Image
          src="/white_logo.png"
          width={64}
          height={64}
          className="rounded-full md:hidden"
          alt="Profile picture"
        />
        <Image
          src="/white_logo.png"
          width={80}
          height={80}
          className="rounded-full md:block hidden xl:hidden"
          alt="Profile picture"
        />
        <Image
          src="/white_logo.png"
          width={90}
          height={90}
          className="rounded-full hidden xl:block"
          alt="Profile picture"
        />
      </div>
      {/* Title */}
      <h1 className="text-lg font-bold absolute text-center w-full ">
        {/* <a href="/">Kevos Attire</a> */}
      </h1>

      {/* Check if mobile device */}
      {matches && (
        <div className="flex gap-8 relative">
          <a href="/">Home</a>
          <a href="/products">Shirts</a>
          <a href="/about">About</a>
          <div className="flex relative items-center justify-center" onClick={() => setOpen(!open)}>
            <FiShoppingCart className="text-lg lg:text-xl" />
            <span className="absolute text-white text-xs w-5 h-5 rounded-[50%] bg-orange-600 -top-2.5 -right-2.5 flex items-center justify-center ">
              {products?.map((item: Product) => {
                if (item.quantity > 0 && item.quantity !== undefined) {
                  return <div key={item.id}>{item.quantity}</div>;
                } else {
                  return <div>0</div>;
                }
              })}
            </span>
          </div>
        </div>
      )}

      {open && <CartTab />}

      {!matches && (
        <div
          onClick={() => setToggled(!toggled)}
          className="space-y-1.5 cursor-pointer z-50"
        >
          <motion.span
            animate={{ rotateZ: toggled ? 45 : 0, y: toggled ? 8 : 0 }}
            className="block h-0.5 w-8 bg-[#EEEEEE]"
          ></motion.span>
          <motion.span
            animate={{ width: toggled ? 0 : 24 }}
            className="block h-0.5 w-6 bg-[#EEEEEE]"
          ></motion.span>
          <motion.span
            animate={{
              rotateZ: toggled ? -45 : 0,
              y: toggled ? -8 : 0,
              width: toggled ? 32 : 16,
            }}
            className="block h-0.5 w-4 bg-[#EEEEEE]"
          ></motion.span>
        </div>
      )}
      {toggled && !matches && (
        <motion.div
          animate={{ opacity: 1, x: 0 }}
          initial={{ opacity: 0, x: 25 }}
          className="fixed flex bg-slate-700 bottom-0 right-0 w-full h-screen items-center justify-center z-40"
        >
          <motion.div
            variants={navMotion}
            animate="visible"
            initial="hidden"
            className="flex flex-col gap-24 text-lg"
          >
            <motion.a variants={itemMotion} href="/">
              Home
            </motion.a>
            <motion.a variants={itemMotion} href="/products">
              Products
            </motion.a>
            <motion.a variants={itemMotion} href="/about">
              About
            </motion.a>
            <motion.a variants={itemMotion} href="/cart">
              Cart
            </motion.a>
          </motion.div>
        </motion.div>
      )}
    </nav>
  );
}