<nav id="sidenav-layout"

            class="sidenav"

            data-mdb-mode="side"

            data-mdb-slim="true"

            data-mdb-slim-collapsed="true"

            data-mdb-content="#slim-content"

            data-mdb-hidden="false"

            data-mdb-close-on-esc="false"

            data-mdb-expand-on-hover="true"

            data-mdb-accordion="true"

            data-mdb-scroll-container="#scroll-container">

            <div>

                <div id="header-content" class="sidenav-header text-center px-3 py-3">

                    <!-- Navbar brand -->

                    <a class="navbar-brand mt-2 my-auto" href="#" data-mdb-slim="false">

                        <img id="imageLogo" src="https://kybneocheck.azurewebsites.net/img/logo.png" style="max-height: 100px;" alt="" loading="lazy">

                    </a>

                    <!-- Navbar brand -->

                    <a class="navbar-brand mt-2 my-auto me-0" href="#" data-mdb-slim="true">

                        <img id="imageLogoSlim" src="https://kybneocheck.azurewebsites.net/img/logo_slim.png" style="max-height: 100px;" alt="" loading="lazy">

                    </a>

                </div>

                <hr class="mt-0 mb-0" />

            </div>

            <ul class="sidenav-menu" id="scroll-container">

                <!-- Example 1 -->

                <li class="sidenav-item">

                    <a class="sidenav-link main-color" href="#">

                        <i class="fas fa-video fa-fw me-2"></i><span data-mdb-slim="false">Accordion example</span>

                    </a>

                  <ul class="sidenav-collapse">

                    <li class="sidenav-item">

                      <a class="sidenav-link main-color ripple-surface-primary active d-block h-auto py-2" href="#" target="_blank">

                        <i class="fa-fw fas fa-stream"></i>

                          

                        <span data-mdb-slim="false">Videoidentifications</span>

                      </a>

                    </li>

                    <li class="sidenav-item">

                      <a class="sidenav-link main-color ripple-surface-primary active d-block h-auto py-2" href="#" target="_blank">

                        <i class="fa-fw fas fa-circle-user"></i>

                          

                        <span data-mdb-slim="false">Face check</span>

                      </a>

                    </li>

                    <li class="sidenav-item">

                      <a class="sidenav-link main-color ripple-surface-primary active d-block h-auto py-2" href="#" target="_blank">

                        <i class="fa-fw fas fa-image-portrait"></i>

                          

                        <span data-mdb-slim="false">Unattended identification</span>

                      </a>

                    </li>

                  </ul>

                </li>

                <!-- Example 1 -->

            </ul>

        </nav>

​

​