Sidenav initialization

[madinah-arabic]

We've purchased the tw-elements pro Individual plan and we need to initialize the Sidenav as follows
sidenavAccordion: !1,
sidenavBackdrop: !1,
sidenavCloseOnEsc: !1,
sidenavColor: "success",
sidenavContent: '#content',
sidenavScrollContainer: '',
sidenavHidden: !1,
sidenavMode: "side",
sidenavPosition: "relative",
sidenavWidth: (condition)? 340 : 260

but without having to call update method. Basically, remove the toggle, modal and position fixed behavior. We also tried to add a scrolling container but failed, can you please help guide us to how we can achieve that without hacking into the component?

Thank you.

[juujisai]

Hi @madinah-arabic !

I think you will have to initialize the Sidenav via JS, since you want to use a condition for setting the width of the sidenav. Remove the data-twe-sidenav-init attribute and change the fixed class to relative (in the nav element). Then you can use the js to initialize the sidenav:

import { Sidenav } from "tw-elements";

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

const instance = new Sidenav(sidenavEl, {
  sidenavAccordion: !1,
  sidenavBackdrop: !1,
  sidenavCloseOnEsc: !1,
  sidenavColor: "success",
  sidenavContent: "#content",
  sidenavScrollContainer: "",
  sidenavHidden: !1,
  sidenavMode: "side",
  sidenavPosition: "relative",
  sidenavWidth: condition ? 340 : 260,
});

As of the container case you can check this example from our documentation: https://tw-elements.com/docs/standard/navigation/sidenav/#side-transition. The preview is not working for some reason but I've copied the example code to a fresh app and it works fine there so feel free to play around with it.

---

If you have other issues or questions for other topics you can post them here: https://mdbootstrap.com/support/cat/twe. This forum is our priority for a pro support.

[madinah-arabic]

Thank you!

I tried the new Sidenav code and it worked. I'll check the code for container.

Re the pro support, I tried to login and register there with the credentials I used in TW when I purshased the library but it didn't work (login gives wrong username and password, and register give username already exists error)!

[juujisai]

The login and password you use to access the documentation doesn't work for support page?

[madinah-arabic]

Yes, TW credentials don't work on MDB. Not even registration works on MDB.

[juujisai]

Our team sent you an email with option to reset the password. If you do not see the email, contact us at [email protected]

[madinah-arabic]

Thank you. This worked!