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

updated nav menu funtionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-22 08:45:33 -05:00
parent 312cb1be9b
commit 550fcb21b7
3 changed files with 34 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

@ -12,6 +12,7 @@ import Img3 from "../assets/bg-3.webp"
import { useState } from "react"; import { useState } from "react";
import NavBag from "./NavBag"; import NavBag from "./NavBag";
import NavSearch from "./NavSearch"; import NavSearch from "./NavSearch";
import NavMenu from "./NavMenu";
const Home = () => { const Home = () => {
@ -76,6 +77,7 @@ const Home = () => {
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{isActiveBag && <NavBag/>} {isActiveBag && <NavBag/>}
{isActiveSearch && <NavSearch/>} {isActiveSearch && <NavSearch/>}
{isActive && <NavMenu/>}
</AnimatePresence> </AnimatePresence>
</div> </div>
<Slider {...homeSlide}> <Slider {...homeSlide}>

29
awwwards_ss4/src/components/NavMenu.jsx Normal file
View file

@ -0,0 +1,29 @@
const NavMenu = () => {
return (
<div className='overflow-hidden bg-[#FBF8F4] absolute w-[90.5vw] h-[50vh] rounded-b-3xl -z-10 px-4'>
<div className='mt-40 grid grid-cols-2'>
<div className='px-2 flex flex-col'>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Best sellers<span className="text-xs">21</span></a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Latest<span className="text-xs">01</span></a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">All<span className="text-xs">21</span></a>
</div>
<div className='px-2 flex flex-col'>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Face<span className="text-xs">04</span></a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Body<span className="text-xs">04</span></a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Kits<span className="text-xs">20</span></a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Tools<span className="text-xs">05</span></a>
</div>
</div>
<div className="border border-dashed border-black mt-4 mb-4 mx-2"></div>
<div className='px-2 flex flex-col'>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Ethos</a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Apothecary</a>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">journal</a>
</div>
</div>
)
}
export default NavMenu

3
awwwards_ss4/src/index.css
View file

@ -2,6 +2,9 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html{
overflow-x: hidden;
}
body{ body{
font-family: "Space Mono", monospace; font-family: "Space Mono", monospace;
} }