<!-- Navigation -->

  <!-- Sidenav -->

  <nav id="sidenav-1" class="sidenav" data-mdb-hidden="false" data-mdb-accordion="true">

    <a class="ripple d-flex justify-content-center py-4" href="#!" data-mdb-ripple-color="primary">

      <img id="MDB-logo" src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"

        alt="MDB Logo" draggable="false" />

    </a>

​

    <ul class="sidenav-menu">

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link"><i class="fas fa-cogs fa-fw me-3"></i><span>Multi level</span></a>

        <ul class="sidenav-collapse">

          <li class="sidenav-item">

            <a class="sidenav-link">Multi level 1</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link" data-mdb-toggle="collapse" role="button" href="#multilevel21">Multi level 2</a>

             <ul class=" collapse" id="multilevel21" style="list-style: none">  <!-- removed class sidenav-collapse from ul -->

                <li class="sidenav-item" >

                  <a class="sidenav-link">Multi level 2.1</a>

                </li>

                <li class="sidenav-item">

                  <a class="sidenav-link">Multi level 2.2</a>

                </li>

        </ul>

          </li>

        </ul>

      </li>

​

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-calendar fa-fw me-3"></i><span>Calendar</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-users fa-fw me-3"></i><span>Users</span></a>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link" href="">

          <i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a>

      </li>

    </ul>

  </nav>

  <!-- Sidenav -->