jtpmcdevitt/awwwards_series
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated nav search functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-20 12:54:44 -05:00
parent b7c4b528ec
commit 312cb1be9b
3 changed files with 75 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
awwwards_ss4/src/components/Home.jsx
View file

@ -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}>

60
awwwards_ss4/src/components/NavSearch.jsx Normal file
View file

@ -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

13
awwwards_ss4/src/index.css
View file

@ -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{