NavDrawer

[TheRebelGriz]

Daemonite,

I am working with the NavDrawer item.

Basic usage is working great! Really enjoying the Look-and-Feel that you have provided with this Material UI Kit.

When the screen size is lg or greater, the NavDrawer is always visible. When the screen size is less than lg, the NavDrawer is hidden and you have to click the navbar-toggler icon in order to show the NavDrawer.

When the screen size is less than lg, the only way I have been able to hide the NavDrawer is to click/touch on the screen outside of the NavDrawer space.

Given the following: --Screen Size: less then lg --NavDrawer: Navbar-toggler icon is clicked to show the NavDrawer.

Based on the above Given, the Behavior I am trying to implement is as follows: --When a NavItem NavLink is clicked, would like for the NavDrawer to hide itself.

Note: I am also using a JS Router to put new content into the appContent div. This part is working fine, just cannot get the NavDrawer to close when a NavItem/NavLink is clicked.

Below is a copy of the code being used to try and accomplish the desired behavior.

Do you have any suggestions on what to do to achieve the desired behavior?

Many thanks for the assistance and what you have provided!!

Code:

<header class="navbar navbar-dark navbar-fixed-top">
  <button class="navbar-toggler d-lg-none"  aria-controls="navdrawerTemporary" aria-expanded="false" aria-label="Toggle Navdrawer"
    data-breakpoint="lg" data-target="#navdrawerTemporary" data-toggle="navdrawer" data-type="permanent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <span class="navbar mr-auto"><img src="static/img/logo.png" class="logo" /> &nbsp; AppName </span>
</header>
<div aria-hidden="false" class="navdrawer navdrawer-permanent-lg navdrawer-permanent-clipped doc-navdrawer" id="navdrawerTemporary" tabindex="-1">
  <div class="navdrawer-content">
    <nav class="navdrawer-nav">
      <a class="nav-item nav-link text-black-secondary" href="#go/home">Home</a>
      <a class="nav-item nav-link text-black-secondary" href="#go/customers" aria-expanded="false"><strong>Customers</strong></a>
      <a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-setups" aria-expanded="false"><strong>Configs / Setups</strong></a>
      <div class="collapse" id="doc-navdrawer-setups">
        <a class="nav-item nav-link pl-4 text-black-secondary" href="#go/attrs"><span class="font-weight-normal">Attributes</span></a>
        <a class="nav-item nav-link pl-4 text-black-secondary" href="#go/refCodes"><span class="font-weight-normal">Ref Codes</span></a>
      </div>
      <a class="nav-item nav-link text-black-secondary appLogout" href="#logout">Logout</a>
    </nav>
  </div>
</div>
<main class="doc-main px-lg-3"><div id="appContent" class="container-fluid"></div></main>