'How to make a menu with rounded corners only when item is selected with Tailwind css?

I'm trying to make this with Tailwind CSS: side menu when page is selected and opened

But, for the moment, I only managed to do this: what I managed to do

As you can see, the rounded edges are missing and it only turns dark when it's selected and becomes lighter again when the user is on the page.

Here is my code with Tailwind CSS:

<div className="flex flex-col gap-2 pl-4 pt-4 bg-gray-500 h-screen w-52">
      <h1 className="text-salmon p-2 font-bold text-xl">My Website Admin</h1>
      <a href="/alltrips"
        className="flex flex-row gap-1 w-52 rounded-l-full p-2 text-white focus:text-salmon focus:bg-gray-700">
          <svg
            class="w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <h3>Parcours</h3>
        </a>
</div>

Does anyone know what can I do to achieve this style?

csstailwind-css


Solution 1:[1]

Change rounded-l-full to rounded-full in your code.

According to Tailwind CSS Documentation, rounded-l-full rounds only one side of the element, so the other side won't round.

Code:

<div className="flex flex-col gap-2 pl-4 pt-4 bg-gray-500 h-screen w-52">
      <h1 className="text-salmon p-2 font-bold text-xl">My Website Admin</h1>
      <a href="/alltrips"
        className="flex flex-row gap-1 w-52 rounded-full p-2 text-white focus:text-salmon focus:bg-gray-700">
          <svg
            class="w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <h3>Parcours</h3>
        </a>
</div>

Result:

Result

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kevin Shenouda

Related Questions