<div class="aui-sidenav">
    <nav class="navbar-expand-lg overflow-hidden">
        <button
        class="navbar-toggler float-right m-3"
        type="button"
        data-toggle="collapse"
        data-target="#sideNavbar"
        aria-controls="sideNavbar"
        aria-expanded="false"
        aria-label="Toggle navigation"
        >
        <i class="aha-icon-hamburger-round" />
        </button>
        <div class="collapse navbar-collapse" id="sideNavbar">
        <ul class="w-100">
            <li>
            <a
                href="#"
                class="active"
            >
                Dashboard
            </a>
            </li>
            <li>
            <a
                href="#"
            >
                Facility Management
            </a>
            </li>
            <li>
                <a
                href="#"
                >
                Registry
                </a>
            </li>
            <li id="sidenav-accordion-dropdown">
                <button 
                class="btn btn-text aui-sidenav-acc-header"
                id="sidenavHeadingOne" 
                data-toggle="collapse" 
                data-target="#sidenavcollapseOne" 
                aria-expanded="false"
                aria-controls="sidenavcollapseOne"
                >
                    Components
                    <i class="acc-btn-arrow aha-icon-arrow-down"></i>
                </button>
                <ul id="sidenavcollapseOne" class="aui-sidenav-acc-body collapse" aria-labelledby="sidenavHeadingOne" data-parent="#sidenav-accordion-dropdown">
                    <li>
                        <a href="#">Header</a>
                    </li>
                    <li>
                        <a href="#">Footer</a>
                    </li>
                </ul>
            </li>
        </ul>
        </div>
    </nav>
</div>

<div class="aui-sidenav-plane">
<nav class="navbar-expand-lg overflow-hidden">
    <button
    class="navbar-toggler float-right m-3"
    type="button"
    data-toggle="collapse"
    data-target="#sideNavbar2"
    aria-controls="sideNavbar2"
    aria-expanded="false"
    aria-label="Toggle navigation"
    >
    <i class="aha-icon-hamburger-round" />
    </button>
    <div class="collapse navbar-collapse" id="sideNavbar2">
    <ul class="w-100">
        <li>
        <a
            href="#"
            class="active"
        >
            Profile
        </a>
        </li>
        <li>
        <a
            href="#"
        >
            Notification Settings
        </a>
        </li>
        <li>
        <a
            href="#"
        >
            Notification Settings
        </a>
        </li>
        <li id="sidenav-accordion-dropdown">
            <button 
            class="btn btn-text aui-sidenav-acc-header"
            id="sidenavHeadingOne" 
            data-toggle="collapse" 
            data-target="#sidenav2collapseOne" 
            aria-expanded="false"
            aria-controls="sidenav2collapseOne"
            >
                Components
                <i class="acc-btn-arrow aha-icon-arrow-down"></i>
            </button>
            <ul id="sidenav2collapseOne" class="aui-sidenav-acc-body collapse" aria-labelledby="sidenavHeadingOne" data-parent="#sidenav-accordion-dropdown">
                <li>
                    <a href="#">Header</a>
                </li>
                <li>
                    <a href="#">Footer</a>
                </li>
            </ul>
        </li>
    </ul>
    </div>
</nav>
</div>