Sidenav closing issue

[sylcha]

Hello !

I cannot figure out why the button with the cross cannot close my sidenav component here. I've checked all the data-te-... and all seems OK but the button doesn't trigger the sidenav closing though.

Is there a way to diagnose this issue deeper ? Because I have no error message in console...

Thanks in advance for your help.

[sylcha]

I've a solution but I'm not sure that the better one : I add the following in the fonction triggered by the button which is supposed to close the sidenav. It's like the sidenav instance is not initiated on mount (because Sidenav.getInstance return an error).

const instance = Sidenav.getOrCreateInstance(
  document.getElementById('choiceSideMenuWrapper')
)
instance.toggle()

[juujisai]

Hi! From what I can see you have included all the necessary data attributes so it should work out of the box. What kind of initialization did you use for your sidenav? Did you initialize via new Sidenav(...) or initTE( { Sidenav } ) ?

With initTE the button is going to work without the need of using the toggle method. Without it, you would have to use it like you have shown.

[sylcha]

HI,

I've made the same diagnosis than you. The setup seemed ok but it's not working though... We use Tailwind Elements along with Svelte here. In onMount, I made use of initTE without success. The thing is the design is different for smartphone and part of the HTML code is enclosed within the (#if...} {:else} {/if} Svelte structure. I'm not sure about how it works but maybe the part of the DOM upon which the button should apply is not ready when onMount is called. If the div is not found, initTE is not able to initialise the Sidenav instance I guess.

If that was the case, could you confirm that the solution I've provides is the best one and not a workaround ?

Thanks for your answer by the way.

[juujisai]

The solution you provided is not a workaround. This is a valid use of a method that Sidenav provides.

For your Svelte app, are you using dynamic imports by any chance? If you are not, then using the dynamic import may be worth a try if you would rather use the initTE method.