Sidenav width

[sylcha]

Hello everybody,

I'm using Svelte + TailwindCSS in some project and I would like to use Tailwind Elements because I'm not a pro in CSS and it seems easy to use.
I would like to use the Sidenav navigation component. My code works as expected (toggle button open/close the sidenav component and the remaining of the page is adapting in width) except for the Sidenav component width. It's like I cannot choose the width. I tried to use w-96 instead of w-60 for the sidenav but it's not working.

What I've done

Here is the code for my toggle button :

<button
  data-te-sidenav-toggle-ref
  data-te-target="#choiceSideMenuWrapper"
  aria-controls="#choiceSideMenuWrapper"
  aria-haspopup="true"
>
  <i
    class="bx bx-right-arrow-alt text-2xl text-coopmaths-action dark:text-coopmathsdark-action hover:text-coopmaths-action-lightest hover:dark:text-coopmathsdark-action-lightest"
  />
</button>

And here is the code for the sidenav component where I tried to use w-96 :

<div
    id="choiceSideMenuWrapper"
    class="fixed left-0 z-[1035] h-full w-96 -translate-x-full data-[te-sidenav-hidden='false']:translate-x-0 overflow-y-auto overscroll-contain bg-coopmaths-canvas dark:bg-coopmathsdark-canvas"
    data-te-sidenav-init
    data-te-sidenav-hidden="false"
    data-te-sidenav-content="#exercisesPart"
    data-te-sidenav-position="fixed"
    data-te-sidenav-mode="side"
  >
    <div
      data-te-sidenav-menu-ref
      class="h-full w-full bg-coopmaths-canvas dark:bg-coopmathsdark-canvas"
    >
      <SideMenu />
    </div>
  </div>

The page content is in this div where I tried to adapt left padding !pl-96 accordingly :

<div
    id="exercisesPart"
    class="w-full overflow-y-auto overscroll-contain px-6 !pl-96 bg-coopmaths-canvas dark:bg-coopmathsdark-canvas"
  >
...
</div>

You may have a full look at the project here.

Question

How can I choose the sidenav width ?

Edit

I tried your basic exemple with w-96 instead of w-60 in a simple page and the issue is the same.

[juujisai]

Hello! Did you try using the sidenavWidth option? For example

<div
  data-te-sidenav-init
  data-te-sidenav-width="400"
  ...
</div>

Checkout other options here: https://tw-elements.com/docs/standard/navigation/sidenav/#api-section-options

[sylcha]

Damned! How could I've missed the API tab in the documentation! It works now with a fixed width. Thanks for your answer.

Now I have to figure out if this sidenavWidth property may receive dynamic value, the idea is that the sinenav component width would have 1/4th of the window width for example.

[juujisai]

Try initializing the Sidenav via JS

const sidenav = document.getElementById("sidenav-1");

const sidenavInstance = new Sidenav(sidenav, {
  sidenavWidth: window.innerWidth / 4,
});

The only problem would be when the window resizes. There is a update method that Sidenav provides but I see there are some issues with that at this moment. We are going to take a look at this.