How to close DaisyUI drawer menu with just one click?

Question

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

Answer 1

Just add this to your <a> tag

<a on:click={() => {document.getElementById('my-drawer-3').click()}} href='/test'>Test</a>