I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly. Upon inspecting in the dev tool, the transition class is being applied correctly but the effect doesn't display. Here is my code:
"use client"
import Image from "next/image"
import React, { useState } from 'react'
import profile from '../../assets/images/profile.png'
import { buttonprops } from "@/data/Data";
import NavLinks from "./NavLinks/NavLinks";
import { ButtonType } from "@/types/button";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Navbar = () => {
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
console.log("item is being clicked and vlaue of visibie is " + isVisible)
setIsVisible(!isVisible);
};
const handleMouseClick = () => {
if (isVisible) {
setIsVisible(!isVisible);
}
}
return (
<div className="flex flex-row">
<div className={`flex border border-black `}>
<div className="flex row border border-black md:hidden">
<div className="flex w-44 h-14 border items-center border-black pl-4">
<FontAwesomeIcon className="text-3xl" onClick={toggleVisibility} icon={faBars} />
</div>
</div>
<div className={`md:block w-44 h-screen border border-black text-white ${isVisible ? 'absolute transition w-80 duration-300 ease-in-out' : 'hidden'} `}>
<div className="flex flex-col items-center pt-5 pb-10 border bg-slate-200">
<Image src={profile} width={500} height={500} className="rounded-full w-32 h-32 border-4 border-blue-500" alt="Picture of the author" />
</div>
<div style={{ backgroundColor: '#222e50' }} className="flex flex-col h-full ">
{buttonprops.map((data, i) => {
return <NavLinks key={i} name={data.name} icon={data.icon} />;
})}
</div>
</div>
</div>
<div onClick={handleMouseClick} className="border border-black w-full h-screen">
<div className="flex border h-14 w-full border-black items-center justify-center md:hidden">
<div className="hi"> Data </div>
</div>
<div className="w-full">
Content
</div>
</div>
</div>
)
}
export default Navbar