How to open an item in MDBSideNav when component inited


Topic: How to open an item in MDBSideNav when component inited

Malasharhan asked 2 years ago

Expected behavior

I want to open an item in MDBSideNav when page is loaded. But I can not find any option for it.

Actual behavior

Resources (screenshots, code snippets etc.)

<MDBSideNav
  logo={images.logo.logo100}
  href={routes.root}
  fixed
  triggerOpening={isOpen}
  breakWidth={SIDE_NAV.BREAKPOINT}
>
  <MDBSideNavNav>
    <MDBSideNavCat
      name={t("NAVBAR.DRIVERS.ROOT")}
      id={t("NAVBAR.DRIVERS.ROOT")}
      isOpen={pathname.startsWith(routes.drivers.root)}
      icon="car-alt"
    >
      <MDBSideNavLink to={routes.drivers.list}>
        {t("NAVBAR.DRIVERS.LIST")}
      </MDBSideNavLink>
      <MDBSideNavLink to={routes.drivers.add}>
        {t("NAVBAR.DRIVERS.ADD")}
      </MDBSideNavLink>
    </MDBSideNavCat>
    <MDBSideNavCat
      name={t("NAVBAR.LOCATION.ROOT")}
      id={t("NAVBAR.LOCATION.ROOT")}
      isOpen={pathname.startsWith(routes.location.root)}
      icon="map-marker-alt"
    >
      <MDBSideNavLink to={routes.location.main}>{t("NAVBAR.LOCATION.MAIN")}</MDBSideNavLink>
      <MDBSideNavLink to={routes.location.map}>{t("NAVBAR.LOCATION.MAP")}</MDBSideNavLink>
    </MDBSideNavCat>
    <MDBSideNavCat
      name={t("NAVBAR.COMMISSION.ROOT")}
      id={t("NAVBAR.COMMISSION.ROOT")}
      isOpen={pathname.startsWith(routes.commission.root)}
      icon="money-bill"
    >
      <MDBSideNavLink to={routes.commission.main}>{t("NAVBAR.COMMISSION.MAIN")}</MDBSideNavLink>
    </MDBSideNavCat>
  </MDBSideNavNav>
</MDBSideNav>

Piotr Glejzer staff commented 2 years ago

isOpen is a boolean prop so you have to put a conditional statement to do this


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.3
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No