Help with an animation in tailwind.
The first website ectogasm is inspiration . I have been trying to do that navbar animation on my website with tailwind . Help regarding this would be much appreciated. I am providing the code below.
1 Reply
jsx
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false)
return (
<>
this is the navigation for mobile
<nav className='relative z-10 lg:hidden w-[100%] p-3 h-[40px] '>
<IconContext.Provider value={{ size: '20px' }}>
<li onClick={() => setIsOpen(!isOpen)} className=' grid justify-end text-white' ><AiOutlineArrowsAlt></AiOutlineArrowsAlt></li>
</IconContext.Provider>
{
isOpen && <div className=' absolute top-0 left-0 h-[100vh] w-full bg-[black]
transition-transform transform duration-1000 ease-in-out
'
style={{ transform: isOpen ? 'translateY(0)' : 'translateY(-100%)' }}
>
{/* closing navigation control for mobile */}
<div className='h-[40px] p-3'>
<IconContext.Provider value={{ size: '15px' }}>
<li onClick={() => setIsOpen(!isOpen)} className=' grid justify-end text-white' ><BsArrowsAngleContract></BsArrowsAngleContract></li>
</IconContext.Provider>
</div >
{/* mobile nav body */}
<div className='min-h-[calc(100vh-40px)] flex flex-col justify-center p-[20px]'>
<div className=' h-[60vh] w-full '>
<ul className='text-[white]'>
<Link className='block font-custom text-[2rem] mt-5'>Home</Link>
<hr />
<Link className='block font-custom text-[2rem] mt-5'>All Toys</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>My Toys</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>Add A Toy</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>Login</Link> <hr />
</ul>
</div>
</div>
</div>
}
</nav>
</>
);
};
jsx
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false)
return (
<>
this is the navigation for mobile
<nav className='relative z-10 lg:hidden w-[100%] p-3 h-[40px] '>
<IconContext.Provider value={{ size: '20px' }}>
<li onClick={() => setIsOpen(!isOpen)} className=' grid justify-end text-white' ><AiOutlineArrowsAlt></AiOutlineArrowsAlt></li>
</IconContext.Provider>
{
isOpen && <div className=' absolute top-0 left-0 h-[100vh] w-full bg-[black]
transition-transform transform duration-1000 ease-in-out
'
style={{ transform: isOpen ? 'translateY(0)' : 'translateY(-100%)' }}
>
{/* closing navigation control for mobile */}
<div className='h-[40px] p-3'>
<IconContext.Provider value={{ size: '15px' }}>
<li onClick={() => setIsOpen(!isOpen)} className=' grid justify-end text-white' ><BsArrowsAngleContract></BsArrowsAngleContract></li>
</IconContext.Provider>
</div >
{/* mobile nav body */}
<div className='min-h-[calc(100vh-40px)] flex flex-col justify-center p-[20px]'>
<div className=' h-[60vh] w-full '>
<ul className='text-[white]'>
<Link className='block font-custom text-[2rem] mt-5'>Home</Link>
<hr />
<Link className='block font-custom text-[2rem] mt-5'>All Toys</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>My Toys</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>Add A Toy</Link> <hr />
<Link className='block font-custom text-[2rem] mt-5'>Login</Link> <hr />
</ul>
</div>
</div>
</div>
}
</nav>
</>
);
};