Sidebar

<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 my-3 mx-0"
        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 class="active">
                    <a
                        href="#"
                    >
                        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>