I'm using the DaisyUI drawer component to render a menu on mobile. See here for a working example:https://daisyui.com/components/drawer
Now in the example there's a button which can be used to open and close the mobile menu.
The button triggers a checked status on following checkbox to show/hide the drawer:
<input id="my-drawer" type="checkbox" class="drawer-toggle">
My code:
let checked = 'checked';function handleClick() { (checked == 'checked') ? checked = '': checked = 'checked';}
On the input:
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" bind:checked={checked}>
On the menu item:
<a on:click={handleClick} href='/test'>Test</a>
The problem is that I have to click two times to hide the drawer. The first click triggers a visual effect on the menu item. The second click closes the drawer. How can I achive the same result with just one click?
DEMO Link:
https://svelte.dev/repl/c06f018ac84f4b86b1d37f7576d25db1?version=3.29.7