<div class="sidebar">
    <div class="user-profile">
        <img src="/images/defaultProPic.png" alt="Profile Picture">
        <div class="user-info">
            <span><b>sasha_bon</b></span>
            <div class="user-status">
                <span class="status-dot online"></span>
                <span class="status-text">Online</span>
            </div>
        </div>
    </div>
    <ul>
        <li><a href="/"><i class="fa fa-home"></i> Dashboard</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-users"></i>
                <span>Users</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Resellers</a>
                <a href="/users">Users List</a>
                <a href="#">Generate Subscribers Batch</a>
                <a href="#">Subscribers Batch List</a>
                <a href="#">Connected Subscribers</a>
            </div>
        </li>

        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-server"></i>
                <span>VPN Servers</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">VPN List</a>
                <a href="#">VPN Bundles</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-tachometer-alt"></i>
                <span>Servers</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Add New Server</a>
                <a href="#">Server List</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-bell"></i>
                <span>Push Management</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">App List</a>
                <a href="#">Push Template</a>
                <a href="#">Send Push</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-coins"></i>
                <span>Rates Section</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Add New Rate Plan</a>
                <a href="#">Rate Plan</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-chart-bar"></i>
                <span>Reports</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Subscription Report</a>
                <a href="#">Hourly Server Connection</a>
                <a href="#">Hourly Subscription</a>
                <a href="#">Online Payment Report</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">
                <i class="fa fa-cogs"></i>
                <span>Settings</span>
                <i class="fa-arrow fa fa-caret-left"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Radius Server</a>
                <a href="#">App Config</a>
                <a href="#">Panel</a>
            </div>
        </li>
    </ul>
</div>

<script>
    // Get all the dropdown buttons
    var dropdowns = document.querySelectorAll('.dropbtn');
    dropdowns.forEach(function(dropbtn) {
        // Listen for a click on each dropdown button
        dropbtn.addEventListener('click', function() {
            // This will close any already open items
            var openDropdowns = document.querySelectorAll('.dropdown-content.show');
            openDropdowns.forEach(function(openDropdown) {
                if(openDropdown !== this.nextElementSibling) {
                    openDropdown.classList.remove('show');
                }
            }, this);

            // Toggle the 'show' class on the clicked dropdown content
            var dropdownContent = this.nextElementSibling;
            var icon = this.querySelector('i.fa-arrow');
            dropdownContent.classList.toggle('show');

            // Toggle the icon class based on the presence of the 'show' class in the dropdown content
            if (dropdownContent.classList.contains('show')) {
                icon.classList.remove('fa-caret-left');
                icon.classList.add('fa-caret-down');
            } else {
                icon.classList.remove('fa-caret-down');
                icon.classList.add('fa-caret-left');
            }
        });
    });


</script>

