From b7c4b528ec56bddb632794dddb48462dcdf5b16a Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Fri, 19 Apr 2024 16:35:03 -0500
Subject: [PATCH] updated add to bag functionality

---
 awwwards_ss4/src/components/Home.jsx     | 40 +++++++++++++++--
 awwwards_ss4/src/components/NavBag.jsx   | 57 ++++++++++++++++++++++++
 awwwards_ss4/src/components/Navbar.jsx   |  2 +-
 awwwards_ss4/src/components/Products.jsx |  2 +-
 4 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 awwwards_ss4/src/components/NavBag.jsx

diff --git a/awwwards_ss4/src/components/Home.jsx b/awwwards_ss4/src/components/Home.jsx
index ef05895..a02c9cc 100644
--- a/awwwards_ss4/src/components/Home.jsx
+++ b/awwwards_ss4/src/components/Home.jsx
@@ -2,12 +2,15 @@ import Navbar from "./Navbar";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import {motion} from "framer-motion"
+import {motion, AnimatePresence} from "framer-motion"
 import { AiOutlineShopping, AiOutlineSearch } from "react-icons/ai";
 import { RiMenu2Fill } from "react-icons/ri";
+import { IoClose } from "react-icons/io5";
 import Img1 from "../assets/bg-1.webp"
 import Img2 from "../assets/bg-2.webp"
 import Img3 from "../assets/bg-3.webp"
+import { useState } from "react";
+import NavBag from "./NavBag";
 
 
 const Home = () => {
@@ -25,6 +28,23 @@ const Home = () => {
     initial:{x: 0,},
     animate:{x: "-100%",  transition:{ease: "linear", repeat: Infinity, duration: 20},},
   };
+//NavClick
+  const [isActive, setIsActive] = useState(false);
+  const [isActiveBag, setIsActiveBag] = useState(false);
+  const [isActiveSearch, setIsActiveSearch] = useState(false);
+  const opacity = {
+    initial: {
+      opacity: 0
+    },
+    open: {
+      opacity: 1,
+      transition: {duration: 0.35}
+    },
+    closed: {
+      opacity: 0,
+      transition: {duration: 0.35}
+    }
+  }
 
   return (
     <>
@@ -39,10 +59,22 @@ const Home = () => {
         </div>
         <Navbar/>
         <div className='flex flex-col'>
-            <p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineShopping className="text-xl"/></p>
-            <p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineSearch className="text-xl"/></p>
-            <p className='icon-hidden bg-[#FBF8F4] w-10 h-10 rounded-full justify-center items-center cursor-pointer '><RiMenu2Fill className="text-xl"/></p>
+          <div onClick={() => {setIsActiveBag(!isActiveBag)}} className="relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
+            <motion.p variants={opacity} animate={!isActiveBag ? "open" : "closed"}><AiOutlineShopping className="text-xl"/></motion.p>
+            <motion.p variants={opacity} animate={isActiveBag ? "open" : "closed"} className='absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
+          </div>
+          <div onClick={() => {setIsActiveSearch(!isActiveSearch)}} className="relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
+            <motion.p variants={opacity} animate={!isActiveSearch ? "open" : "closed"}><AiOutlineSearch className="text-xl"/></motion.p>
+            <motion.p variants={opacity} animate={isActiveSearch ? "open" : "closed"} className='absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
+          </div>
+          <div onClick={() => {setIsActive(!isActive)}} className="icon-hidden relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
+            <motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="icon-hidden"><RiMenu2Fill className="text-xl"/></motion.p>
+            <motion.p variants={opacity} animate={isActive ? "open" : "closed"} className='icon-hidden absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
+          </div>
         </div>
+        <AnimatePresence mode="wait">
+          {isActiveBag && <NavBag/>}
+        </AnimatePresence>
       </div>
       <Slider {...homeSlide}>
         <div >
diff --git a/awwwards_ss4/src/components/NavBag.jsx b/awwwards_ss4/src/components/NavBag.jsx
new file mode 100644
index 0000000..58aa37c
--- /dev/null
+++ b/awwwards_ss4/src/components/NavBag.jsx
@@ -0,0 +1,57 @@
+const NavBag = () => {
+  return (
+    <div className="overflow-hidden bg-[#FBF8F4] flex flex-col absolute w-[80vw] md:w-[420px] h-[90vh] right-5 sm:right-20 md:right-28 rounded-2xl p-8 -z-10">
+        <div className="w-[100%] h-[100%] flex flex-col justify-between">
+            <div className="flex flex-col">
+                <p className="uppercase text-xl mb-3">my bag (0)</p>
+                <div className="border-2 border-[#F2E9DB] rounded-full mb-3"></div>
+                <p className="text-[11px] tracking-tight mb-5">Spend another $50 to recieve FREE SHIPPING</p>
+                <div className="border border-dashed border-black mb-3"></div>
+                <p className="text-sm">No items in your bag</p>
+            </div>
+            <div className="flex flex-col">
+                <p className="text-[13px] uppercase mb-3">Build your kit</p>
+                
+                <div className="border border-dashed border-black mb-2"></div>
+                <div className="flex justify-between items-center">
+                    <div className="flex items-center">
+                        <img src="https://cdn.shopify.com/s/files/1/0621/9313/9901/files/KIT_E-COMM_-_SMOOTHING_CONCENTRATE.png" alt="" className="w-[50px]"/>
+                        <a href="" className="flex flex-col">
+                            <p className="text-xs uppercase">Smoothing Concentrate</p>
+                            <p className="text-xs text-[#AAAAAA]">30ML / 1.01 FL. OZ </p>
+                        </a>
+                    </div>
+                    <div className="flex gap-4">
+                        <p className="text-sm">$37</p>
+                        <p className="text-sm text-[#C20019]">Add +</p>
+                    </div>
+                </div>
+
+                <div className="border border-dashed border-black mb-2 mt-2"></div>
+                <div className="flex justify-between items-center">
+                    <div className="flex items-center">
+                        <img src="https://cdn.shopify.com/s/files/1/0621/9313/9901/files/KIT_E-COMM_-_SMOOTHING_CONCENTRATE.png" alt="" className="w-[50px]"/>
+                        <a href="" className="flex flex-col">
+                            <p className="text-xs uppercase">Rebalancing Concentrate</p>
+                            <p className="text-xs text-[#AAAAAA]">30ML / 1.01 FL. OZ </p>
+                        </a>
+                    </div>
+                    <div className="flex gap-4">
+                        <p className="text-sm">$37</p>
+                        <p className="text-sm text-[#C20019]">Add +</p>
+                    </div>
+                </div>
+
+                <div className="border border-dashed border-black mb-2 mt-2"></div>
+                <div className="flex justify-between mb-3">
+                    <p className="text-xl">Subtotal:</p>
+                    <p className="text-xl">$0</p>
+                </div>
+                <button className="py-2 rounded-full bg-[#AAAAAA] text-white uppercase">checkout</button>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default NavBag
\ No newline at end of file
diff --git a/awwwards_ss4/src/components/Navbar.jsx b/awwwards_ss4/src/components/Navbar.jsx
index fbdef3d..9bb5f6d 100644
--- a/awwwards_ss4/src/components/Navbar.jsx
+++ b/awwwards_ss4/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
 const Navbar = () => {
   return (
-    <div className='my-1'>
+    <div className='my-1 -z-20'>
         <div className="hidden md:flex gap-5 uppercase border-transparent rounded-full backdrop-blur-md text-white text-sm md:text-lg">
             <a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">shop</a>
             <a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">ethos</a>
diff --git a/awwwards_ss4/src/components/Products.jsx b/awwwards_ss4/src/components/Products.jsx
index 281b78c..4c781df 100644
--- a/awwwards_ss4/src/components/Products.jsx
+++ b/awwwards_ss4/src/components/Products.jsx
@@ -99,7 +99,7 @@ const Products = () => {
                                 <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                     <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                 </button>
-                                <video src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
+                                <img src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" alt="" className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></img>
                             </div>
                         </div>      
                     </div>