My goal is to create a smooth sliding animation for this div that displays details of a clicked project, transitioning in and out from the right side.
This is my attempt using Tailwind CSS:
{selectedProject !== null && (
<div
className={`fixed top-0 right-0 w-full h-full md:w-1/2 z-20 bg-white px-5 py-10 overflow-scroll transform transition duration-600 ${
selectedProject !== null ? 'translate-x-0' : 'translate-x-full'
}`}
>
<div
className="flex items-center justify-between w-full px-1 py-2"
onClick={closeDetails}
>
<div>
<Image
src={back}
alt={back}
quality={100}
height={30}
width={30}
placeholder="blur"
className="cursor-pointer"
/>
</div>
<Link href="#projects">
<div onClick={closeDetails} className="font-bold cursor-pointer">
Back to projects
</div>
</Link>
</div>
<hr className="pb-10" />
<p className="text-lg font-extrabold text-black pb-1">{projects[selectedProject].name}</p>
<p className="text-gray-700 text-base pb-4 ">{projects[selectedProject].details}</p>
<Image
src={projects[selectedProject].image}
alt={`${projects[selectedProject].name} screenshot`}
quality={100}
placeholder="blur"
blurDataURL="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOMzoyuBwAD5gGgL5NkuQAAAABJRU5ErkJggg=="
className="h-72 md:h-80 max-w-auto rounded-lg"
/>
<p className="text-base font-bold text-black pb-1 pt-7">About</p>
<p className="text-xs md:text-base">{projects[selectedProject].details}</p>
<p className="text-base font-bold text-black pb-1 pt-7">
Technologies
</p>
<div className="mt-5">
<div className="flex flex-wrap gap-3 mt-3">
{projects[selectedProject].skills.map((skill, skillIndex) => (
<span
key={skillIndex}
className="w-fit inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-sm font-medium text-black ring-1 ring-inset ring-indigo-700/10"
>
{skill}
</span>
))}
</div>
</div>
<div className="w-fit gap-1 flex items-center">
<Image
src={earth}
alt="earth icon"
quality={100}
height={20}
width={20}
placeholder="blur"
className="cursor-pointer"
/>
<p className="text-base font-bold text-black pb-1 pt-7">Website</p>
</div>
<Link href={projects[selectedProject].link}>
{projects[selectedProject].link}
</Link>
<div className="w-fit gap-3 flex items-center">
<Image
src={github}
alt="github icon"
quality={100}
height={20}
width={20}
placeholder="blur"
className="cursor-pointer"
/>
<p className="text-base font-bold text-black pb-1 pt-7">Github</p>
</div>
<Link href={projects[selectedProject].github}>
{projects[selectedProject].github}
</Link>
</div>
)}
I am struggling to achieve the desired functionality with this code. The same issue persists when applying a similar feature to my menu bar as well, so finding a solution here should solve multiple problems.