<nav class="sidebar sidebar-offcanvas" id="sidebar">
    <ul class="nav">
        <li class="nav-item">
            <a class="navbar-brand brand-logo-mini" href="index.html"><img src="https://www.bootstrapdash.com/demo/steelui/template/images/logo-mini.svg" alt="logo" /></a>
            <a class="navbar-brand brand-logo" href="index.html"><img src="https://www.bootstrapdash.com/demo/steelui/template/images/logo.svg" alt="logo" /></a>
        </li>
        <li class="nav-item">
            <div class="menu-heading mt-0">MAIN MENU</div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html">
                <i class="fas fa-columns menu-icon"></i>
                <span class="menu-title">Dashboard</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="pages/widgets/widgets.html">
                <i class="fas fa-user-friends menu-icon"></i>
                <span class="menu-title">Users</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="pages/widgets/widgets.html">
                <i class="fas fa-user-tie menu-icon"></i>
                <span class="menu-title">Agents</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="pages/widgets/widgets.html">
                <i class="fas fa-clone menu-icon"></i>
                <span class="menu-title">Articles</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="pages/widgets/widgets.html">
                <i class="fas fa-box-open menu-icon"></i>
                <span class="menu-title">Travel Packages</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="pages/widgets/widgets.html">
                <i class="fas fa-clipboard-check menu-icon"></i>
                <span class="menu-title">Package Bookings</span>
            </a>
        </li>
        <li class="nav-item">
            <div class="menu-heading">Option Controls</div>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#apps" aria-expanded="false" aria-controls="apps">
                <i class="fas fa-compass menu-icon"></i>
                <span class="menu-title">Location</span>
                <i class="menu-arrow"><i class="fas fa-arrow-right"></i></i>
            </a>
            <div class="collapse" id="apps">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"> <a class="nav-link" href="pages/apps/email.html">Country</a></li>
                    <li class="nav-item"> <a class="nav-link" href="pages/apps/calendar.html">State</a></li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
                <span class="menu-title documentation">Visit Site</span>
            </a>
        </li>
    </ul>
</nav>