
<style>
    /* Sidebar base */
.sidebar {
    background-color: orange;
    min-height: 100vh;
    width: 240px;
    transition: transform 0.3s ease, width 0.3s ease;
    overflow-x: hidden;
    position: relative;
    z-index: 1000;
}

/* Desktop collapse */
.sidebar.collapsed {
    width: 70px;
}

.sidebar.collapsed span,
.sidebar.collapsed .dropdown-toggle::after {
    display: none;
}

/* Menu toggle button */
.menu-toggle {
    cursor: pointer;
    font-size: 1.8rem;
    color: white;
}

/* Links */
.nav-link,
.dropdown-item {
    color: white !important;
}

.dropdown-menu {
    background-color: #ff9933;
    border: none;
}

.sidebar i {
    font-size: 1.2rem;
    margin-right: 10px;
}

/* ===== MOBILE MODE ===== */
@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        width: 240px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Disable desktop collapse on mobile */
    .sidebar.collapsed {
        width: 240px;
    }

    .sidebar.collapsed span {
        display: inline;
    }

    /* Overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 900;
        display: none;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* Mobile top bar */
.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: orange;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 1200; /* ABOVE sidebar */
}

/* Menu toggle icon */
.mobile-topbar .menu-toggle {
    font-size: 1.8rem;
    color: white;
    cursor: pointer;
}

/* Push content down on mobile */
@media (max-width: 768px) {
    .d-flex {
        margin-top: 55px;
    }

    .sidebar {
        z-index: 1100;
    }
}


</style>
<!-- <div id="sidebarOverlay" class="sidebar-overlay"></div> -->
<!-- Mobile Top Bar -->
<!-- <nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid"> -->
<div class="mobile-topbar d-md-none">
    <i class="bi bi-list menu-toggle" onclick="toggleSidebar()"></i>
   <!--  <div class="d-flex">
            <span class="text-white me-3">Mayor</span>
            <a href="logout.php" class="btn btn-light btn-sm">Logout</a>
        </div> -->
</div>

<div id="sidebarOverlay" class="sidebar-overlay" onclick="closeSidebar()"></div>

<div class="d-flex" style="margin-top: 0px;">
    <div id="sidebar" class="sidebar p-2">

    <!-- <div id="sidebar" class="sidebar p-2 col-md-2"> -->
        <hr style="color:#fff;">
        <ul class="nav flex-column">

            <li class="nav-item">
                <a class="nav-link text-white" href="dashboard.php"><i class="bi bi-speedometer2"></i> <span>Dashboard</span></a>
            </li>
            <hr style="color:#fff;">

            <!-- Mail Menu Group -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="mailDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-envelope-fill"></i> <span>Association</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="mailDropdown">
                    <li><a class="dropdown-item" href="view_associations.php">View Association</a></li>
                    <li><a class="dropdown-item" href="add_ass.php">Add Association</a></li>
                    <li><a class="dropdown-item" href="renewals.php">Renew Association</a></li>
                    <!-- <li><a class="dropdown-item" href="outgoing_mails.php">Outgoing Mails</a></li>
                    <li><a class="dropdown-item" href="enter_mails.php">Enter Mail</a></li>
                    <li><a class="dropdown-item" href="mail_history.php">Mail History</a></li>
                    <li><a class="dropdown-item" href="track_mail.php">Track Mail</a></li> -->
                </ul>
            </li>
            <hr style="color:#fff;">

            <!-- Staff Menu Group -->
            <!-- <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="staffDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-people-fill"></i> <span>Staff Management</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="staffDropdown">
                    <li><a class="dropdown-item" href="staff_list.php">Staff List</a></li>
                    <li><a class="dropdown-item" href="enroll_staff.php">Enroll Staff</a></li>
                </ul>
            </li>
            <hr style="color:#fff;"> -->


             <!-- <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="staffDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-people-fill"></i> <span>Street Naming</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="staffDropdown">
                    <li><a class="dropdown-item" href="street_naming_admin.php">Street Naming</a></li>
                    <li><a class="dropdown-item" href="house_numbering.php">House Numbering</a></li>
                </ul>
            </li>
            <hr style="color:#fff;"> -->

            <!-- <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="staffDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-people-fill"></i> <span>LGA Identification</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="staffDropdown">
                    <li><a class="dropdown-item" href="lgid_management.php">LGA ID</a></li>
                    <li><a class="dropdown-item" href="house_numbering.php">Old LGA IDs</a></li>
                </ul>
            </li>
            <hr style="color:#fff;">
 -->




            

           <!--  <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="mailDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-envelope-fill"></i> <span>Visitors</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="mailDropdown">
                    <li><a class="dropdown-item" href="visitors_log.php">Visitors Log</a></li>
                    <li><a class="dropdown-item" href="enter_visitors.php">Enrol Visitor</a></li>
                    
                   
                </ul>
            </li>
            <hr style="color:#fff;">
 -->
            <!-- Communication -->
            <!-- <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="commDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-chat-dots-fill"></i> <span>Communication</span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="commDropdown">
                    <li><a class="dropdown-item" href="send_email.php">Send Email</a></li>
                    <li><a class="dropdown-item" href="send_sms.php">Send SMS</a></li>
                    <li><a class="dropdown-item" href="issue_query.php">Issue Query</a></li>
                </ul>
            </li>
            <hr style="color:#fff;"> -->
             

        </ul>
    </div>

    <div class="p-3 flex-fill">
        <!-- Your page content starts here -->
<script>
function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('mobile-open');
    document.getElementById('sidebarOverlay').classList.toggle('show');
}

function closeSidebar() {
    document.getElementById('sidebar').classList.remove('mobile-open');
    document.getElementById('sidebarOverlay').classList.remove('show');
}
</script>
