From 312cb1be9b937faba6f413c51f408d3cbe361ea0 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sat, 20 Apr 2024 12:54:44 -0500
Subject: [PATCH] updated nav search functionality

---
 awwwards_ss4/src/components/Home.jsx      |  2 +
 awwwards_ss4/src/components/NavSearch.jsx | 60 +++++++++++++++++++++++
 awwwards_ss4/src/index.css                | 13 +++++
 3 files changed, 75 insertions(+)
 create mode 100644 awwwards_ss4/src/components/NavSearch.jsx

diff --git a/awwwards_ss4/src/components/Home.jsx b/awwwards_ss4/src/components/Home.jsx
index a02c9cc..c61ba66 100644
--- a/awwwards_ss4/src/components/Home.jsx
+++ b/awwwards_ss4/src/components/Home.jsx
@@ -11,6 +11,7 @@ import Img2 from "../assets/bg-2.webp"
 import Img3 from "../assets/bg-3.webp"
 import { useState } from "react";
 import NavBag from "./NavBag";
+import NavSearch from "./NavSearch";
 
 
 const Home = () => {
@@ -74,6 +75,7 @@ const Home = () => {
         </div>
         <AnimatePresence mode="wait">
           {isActiveBag && <NavBag/>}
+          {isActiveSearch && <NavSearch/>}
         </AnimatePresence>
       </div>
       <Slider {...homeSlide}>
diff --git a/awwwards_ss4/src/components/NavSearch.jsx b/awwwards_ss4/src/components/NavSearch.jsx
new file mode 100644
index 0000000..72f47f6
--- /dev/null
+++ b/awwwards_ss4/src/components/NavSearch.jsx
@@ -0,0 +1,60 @@
+import { FaArrowRight } from "react-icons/fa6";
+
+
+const NavSearch = () => {
+  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-6 sm:p-8 -z-10 overflow-y-auto">
+        <form className="flex justify-between border border-[#C20019] py-2 px-4 rounded-full mb-8">
+            <input type="text" placeholder="search store..." className=" bg-transparent placeholder-[#c20019] outline-none text-[#c20019]"/>
+            <button type="submit"><FaArrowRight className="font-semibold text-[#c20019] hover:pl-1 duration-300"/></button>
+        </form>
+        <div>
+            <p className="uppercase text-[13px] mb-5">Search Suggestions</p>
+            <p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Face Oil</p><br className="mb-1"/>
+            <p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">RE:SET Hand Wash</p><br className="mb-1"/>
+            <p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Gift Sets</p><br className="mb-1"/>
+            <p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Lotion</p><br className="mb-1"/>
+        </div>
+        <div className="border border-dashed border-black mt-8 mb-5"></div>
+        <div className="flex flex-col">
+            <div className="flex justify-between">
+                <p className="uppercase text-sm">Best sellers</p>
+                <a href="" className="uppercase text-sm hover:text-[#c20019]">View all</a>
+            </div>
+            <div className="flex justify-between mt-5 uppercase text-xs">
+                <div className="flex flex-col justify-center items-center text-center p-1">
+                    <img src="http://kitskinkind.com.au/cdn/shop/files/Mineral_Cleanser_Front_SHOP.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
+                    <p className="w-[120px] mb-2">mineral water cleanser</p>
+                    <p className="text-[#AAAAAA] mb-2">100ML / 3.38 FL. OZ</p>
+                    <p>$30</p>
+                </div>
+                <div className="flex flex-col justify-center items-center text-center p-1">
+                    <img src="http://kitskinkind.com.au/cdn/shop/files/Skinkind_Faceoil_Front_front_SHOP.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
+                    <p className="w-[120px] mb-2">skinkind face oil</p>
+                    <p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
+                    <p>$42</p>
+                </div>
+            </div>
+
+            <div className="flex justify-between mt-10 uppercase text-xs">
+                <div className="flex flex-col justify-center items-center text-center p-1">
+                    <img src="http://kitskinkind.com.au/cdn/shop/files/KIT_E-COMM_-_BRIGHTENING_CONCENTRATE_THUMB_55189982-0054-4bb0-9799-c4d13d8c7f29.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
+                    <p className="w-[120px] mb-2">brightening concentrate</p>
+                    <p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
+                    <p>$37</p>
+                </div>
+                <div className="flex flex-col justify-center items-center text-center p-1">
+                    <img src="http://kitskinkind.com.au/cdn/shop/files/KIT_E-COMM_-_REBALANCING_CONCENTRATE_THUMB_c56af9b1-9e94-4be3-bd4c-154747ad7a2f.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
+                    <p className="w-[120px] mb-2">rebalancing concentrate</p>
+                    <p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
+                    <p>$37</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    
+  )
+}
+
+export default NavSearch
\ No newline at end of file
diff --git a/awwwards_ss4/src/index.css b/awwwards_ss4/src/index.css
index 2be7d5b..5eaa77f 100644
--- a/awwwards_ss4/src/index.css
+++ b/awwwards_ss4/src/index.css
@@ -8,6 +8,19 @@ body{
 .icon-hidden{
     display: none;
 }
+.arrow-icon:hover{
+    position: absolute;
+    opacity: 1;
+    transition: 0.5s;
+    padding-right: 24px;
+    padding-left:8px;
+}
+.arrow-icon:hover::before {
+    content: '\2192';
+    padding-right:8px;
+    opacity: 1;
+}
+
 
 @media (max-width:810px){
     .icon-hidden{