cart completed tentatively

frontend/src/app/products/page.tsx

@@ -55,13 +55,13 @@ const Products = () => {
         </div>
       </div>
       <div className="right">
-        <Image
+        {/* <Image
           src="/white_logo.png"
           width={64}
           height={64}
           className="rounded-full md:hidden"
           alt="Profile picture"
-        />
+        /> */}
       </div>
       <MenuCard Menu={Product} />
     </div>

frontend/src/components/CartTab/CartTab.css

@@ -0,0 +1,55 @@
+.cart{
+    z-index: 999;
+    background-color: white;
+    -webkit-box-shadow: 0px 0px 7px -5px rgba(0,0,0,0.5);
+    box-shadow: 0px 0px 7px -5px rgba(0,0,0,0.5);
+
+}
+
+.details h1{
+    margin-bottom: 15px;
+    color: gray;
+    font-weight: 400;
+    font-size: 1.125rem;
+}
+
+.details p{
+    color: gray;
+    margin-bottom: 10px;
+}
+
+.details .price{
+    color: #2879fe;
+}
+
+.delete-icon{
+    color: red;
+    font-size: 1.425rem;
+    cursor: pointer;
+}
+
+.total{
+    display: flex;
+    justify-content: space-between;
+    font-weight: 500;
+    font-size: 1.125rem;
+    margin-bottom: 20px;
+}
+.checkout{
+    width: 100%;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    cursor: pointer;
+    border: none;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+
+.reset{
+    color: red;
+    font-size: 0.875rem;
+    cursor: pointer;
+}

frontend/src/components/CartTab/CartTab.tsx

@@ -0,0 +1,64 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { MdDeleteOutline } from "react-icons/md";
+import { Button } from "@/components/ui/button";
+import "./CartTab.css";
+
+const CartTab = () => {
+  const cartItems = true;
+
+  const data = [
+    {
+      id: 1,
+      title: "Product 1",
+      oldPrice: 19,
+      price: 12,
+      isNew: true,
+      desc: "Short sleeve t-shirt",
+      image:
+        "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
+    },
+    {
+      id: 2,
+      title: "Product 2",
+      oldPrice: 19,
+      price: 12,
+      isNew: false,
+      desc: "Short sleeve t-shirt",
+      image:
+        "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
+    },
+  ];
+  return (
+    <div className="cart absolute p-5 text-slate-600 top-28 right-0">
+      {data?.map((item) => (
+        <div className="item flex gap-5 items-center mb-[30px] " key={item.id}>
+          <div className="relative w-[80px] h-[100px]">
+            <Image
+              src={item.image}
+              fill
+              style={{ objectFit: "cover" }}
+              className=""
+              alt="item picture"
+            />
+          </div>
+          <div className="details">
+            <h1>{item.title}</h1>
+            <p className="text-sm">{item.desc?.substring(0, 100)}</p>
+            <div className="price">1 x ${item.price}</div>
+          </div>
+          <MdDeleteOutline className="delete-icon mt-16" />
+        </div>
+      ))}
+      <div className="total">
+        <span>SUBTOTAL</span>
+        <span>$123</span>
+      </div>
+      <Button className="bg-[#F45B1E] text-white checkout rounded-none w-full">PROCEED TO CHECKOUT</Button>
+      {/* <span className="reset">Reset Cart</span> */}
+    </div>
+  );
+};
+
+export default CartTab;

frontend/src/components/CartTab/cartTab.tsx

@@ -1,11 +0,0 @@
-"use client";
-import React from 'react'
-
-const CartTab = () => {
-  const cartItems = false;
-  return (
-    <div className='absolute p-4 rounded-md shadow-[0_3px_10px_rgb(0,0,0,0,2)] bg-white top-12 right-0 flex flex-col gap-6 z-20'>{!cartItems ? (<div>Cart is Empty</div>) : (<div></div>)}</div>
-  )
-}
-
-export default CartTab

frontend/src/components/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ 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";
 
 const navMotion = {
   visible: {
@@ -24,6 +25,7 @@ const itemMotion = {
 };
 
 export default function Nav() {
+  const [open, setOpen] = useState(false);
   const [toggled, setToggled] = useState(false);
   const matches = useMediaQuery("(min-width: 1280px)");
   // console.log(matches);
@@ -74,15 +76,17 @@ export default function Nav() {
           <a href="/">Home</a>
           <a href="/products">Shirts</a>
           <a href="/about">About</a>
-          <a className="flex relative items-center justify-center" href="/cart">
+          <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">
               0
             </span>
-          </a>
+          </div>
         </div>
       )}
 
+      {open && <CartTab />}
+
       {!matches && (
         <div
           onClick={() => setToggled(!toggled)}

frontend/src/components/ui/MenuCard/MenuCard.tsx

@@ -6,6 +6,7 @@ import { Inter } from "next/font/google";
 import { Card } from "../card";
 import Modal from "../../Modal/Modal";
 import { Poppins } from "next/font/google";
+import { useRouter } from 'next/navigation'
 
 const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 
@@ -20,6 +21,7 @@ const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 // const inter = Inter({ subsets: ["latin"] });
 
 const MenuCard = ({ Menu }: any) => {
+  const router = useRouter();
   return (
     <div className="grid qhd:grid-cols-5 desktop:grid-cols-4 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6 ">
       {Menu.map((menu_item: any) => {
@@ -38,6 +40,7 @@ const MenuCard = ({ Menu }: any) => {
                   quality={75}
                   sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
                   className="flex"
+                  onClick={() => router.push(`/products/${menu_item.id}`)}
                 />
               </div>
             </div>