How to toggle "active" state on Navbar dropdown?

[NikarashiHatsu]

Hi, is there any way to toggle an active state on the dropdown using the <summary> tag?

I tried to apply the active class to the <li>, the <summary>, and the <details> tag, and it didn't work. Any workarounds? At least I need an indicator that the menu is toggled, such as using black background color or something like that.

<li>
  <details class="active">
    <summary>
      <x-phosphor-gear class="w-5 h-5" />
      <span>
        {{ __('layouts/menu.Configurations') }}
      </span>
    </summary>
    <ul class="p-2 !mt-0 w-48">
      <li>
        <a>
          {{ __('layouts/menu.Users') }}
        </a>
      </li>
      ...
    </ul>
  </details>
</li>```

[saadeghi]

<details> gets an open attribute when it's open:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#attributes

Let me know if you have a question.

[NikarashiHatsu]

No other option rather than using open attribute?
I want it to behave like an active menu such this:

<ul class="menu bg-base-200 w-56">
  <li><a>Item 1</a></li>
  <li><a class="active">Item 2</a></li>
  <li><a>Item 3</a></li>
</ul>