How to check if element was clicked to make animation using tailwind

I'm trying to make a user menu appear using Tailwind and I'm not sure how to check if the peer is clicked or not to display the animation.

I could use a hook which makes it appear and disappear, etc. but if I use a hook, I won't be able to let the user menu slide in from the right like I'm trying.

Here's what I have:

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
  />
  =<UserMenu />
</div>

And the user menu:

<div
  className="absolute bg-black top-[59px] left-[100px] rounded-bottom-md transform    duration-200 peer-hover:-translate-x-[200px]"
>
  {userMenuItems.map((item) => (
    <div className="py-4 px-8 flex flex-row items-center justify-start text-zinc-400">
      {item.label}
    </div>
  ))}
</div>

Using peer hover is also interesting, does anyone also know how to make the user menu appear on hover but then stay?

I found a solution to that problem that worked for me, but is a little hacky. Notice that my solution is for hovering, yet for clicking it is similar, and the only difference is using the onClick prop instead of the onMouseEnter.

Animate on hover, without vanishing.

What you can do is have a state hovered and use the onMouseEnter prop to indicate whether the peer is hovered, and in the UserMenu component, use that state to apply tailwind classes conditionally, using template literals.

This preserves the animation, and applies the hover functionality.

const [hovered, setHovered] = useState(false);

//...

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
    onMouseEnter={() => setHovered(true)}   // hovered? set the state to true.
  />
  <UserMenu hovered={hovered} />
</div>

<div
  className={`absolute top-[59px] left-[100px] rounded-bottom-md transform    duration-200 ${hovered ? "bg-black -translate-x-[200px]" : "bg-transparent"}`}
>
  {userMenuItems.map((item) => (
    <div className={`py-4 px-8 flex flex-row items-center justify-start ${hovered ? "text-zinc-400" : "text-transparent"}`}>
      {item.label}
    </div>
  ))}
</div>

Include vanish when un-hover.

It is also common that when the menu is displayed and the user hovers the menu, it will vanish when you no longer hover the actually menu (the peer is irrelevant). For this, if you wish, you can use the onMouseLeave prop to make the menu vanish.

The code for this is given below:

const [hovered, setHovered] = useState(false);

//...

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
    onMouseEnter={() => setHovered(true)}   // hovered? set the state to true.
  />
  <UserMenu hovered={hovered} onLeave={() => setHovered(false)} />
</div>

<div
  className={`absolute top-[59px] left-[100px] rounded-bottom-md transform    duration-200 ${hovered ? "bg-black -translate-x-[200px]" : "bg-transparent"}`}
>
  {userMenuItems.map((item) => (
    <div className={`py-4 px-8 flex flex-row items-center justify-start ${hovered ? "text-zinc-400" : "text-transparent"}`}
      onMouseLeave={onLeave}
    >
      {item.label}
    </div>
  ))}
</div>