<header class="sticky-top main-navbar">

    <div class="container">

        <!-- Sidebar Toggle Button in Header for Large Screens -->

        <button class="btn btn-primary sidebar-toggle d-none d-lg-block" aria-label="Toggle sidebar">

            <i class="fa fa-chevron-left"></i>

        </button>



        <nav class="navbar navbar-expand-lg navbar-dark">

            <div class="container-fluid">

                <!-- Sidebar Toggle Button in Header for Small Screens -->

                <button class="btn btn-primary sidebar-toggle d-none d-lg-none" aria-label="Toggle sidebar">

                    <i class="fa fa-chevron-left"></i>

                </button>

                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"

                    data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false"

                    aria-label="Toggle navigation">

                    <span class="navbar-toggler-icon"></span>

                </button>

                <a class="navbar-brand" href="index.php">

                    <img src="./assets/image/logo.png" alt="" class="img-fluid"

                        style="border-radius: 4px;border: 3px solid #40599b;width: 160px;background: #40599b;">

                </a>

                <div class="collapse navbar-collapse d-none d-lg-block" id="navbarNav">

                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

                        <li class="nav-item">

                            <a class="nav-link active" aria-current="page" href="index.php"><i class="fa fa-home"></i>

                                Home</a>

                        </li>

                        <li class="nav-item">

                            <a class="btn btn-sm btn-primary text-white mt-2" href="#logoutModal"

                                data-bs-toggle="modal">

                                Exit LeadX <i class="fa fa-sign-out"></i></a>

                        </li>

                    </ul>

                </div>

                <!-- Offcanvas Navbar (for small screens) -->

                <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasNavbar"

                    aria-labelledby="offcanvasNavbarLabel">

                    <div class="offcanvas-body">

                        <button type="button" class="btn-close btn-nav-close" data-bs-dismiss="offcanvas"

                            aria-label="Close"></button>

                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

                            <li class="nav-item">

                                <a class="nav-link text-white active" aria-current="page" href="index.php"><i

                                        class="fa fa-home"></i> Home </a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link text-white" href="new_entry.php"><i class="fa fa-user-plus"></i> New

                                    Entry</a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link text-white" href="all-Data.php"><i class="fa fa-users"></i> All

                                    Data</a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link text-white" href="global-Data.php"><i class="fa fa-globe"></i> Global

                                    Data</a>

                            </li>

                            <li class="nav-item dropdown">

                                <a class="nav-link dropdown-toggle text-white" href="#" id="userList" role="button"

                                    aria-expanded="false">

                                    Work Status

                                </a>

                                <ul class="dropdown-menu" aria-labelledby="userList">

                                    <?php

                                        $tbsql = "SELECT * FROM status WHERE s_by = '$uadmin' ORDER BY s_pos ASC";

                                        $tbrun = mysqli_query($con, $tbsql);

                                        while ( $tbrows = mysqli_fetch_assoc($tbrun) ) {

                                    ?>

                                    <li><a class="dropdown-item"

                                            href="status_view.php?<?php echo 'st='.$tbrows['s_id']; ?>"><?php echo $tbrows['s_name']; ?></a>

                                    </li>

                                    <?php }?>

                                </ul>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link text-white" href="#logoutModal" data-bs-toggle="modal"> LeadX <i

                                        class="fa fa-sign-out"></i></a>

                            </li>

                        </ul>

                    </div>

                </div>

                <!-- Placeholder for User Profile Icon in Mobile View -->

                <a class="navbar-brand d-block d-md-none" href="profile.php" style="width: 0;">

                    <i class="fa fa-user text-center"

                        style="background: #fff;padding: 5px;border: 2px solid #40599b;border-radius: 50%;color: #40599b;font-size: 16px;width: 30px;"></i>

                </a>

            </div>

        </nav>

    </div>

</header>



<!-- Sidebar (Desktop View) -->

<div class="sidebar d-none d-lg-block">

    <ul class="sidebar-menu mb-5">

        <li class="sidebar-item">

            <a href="index.php" class="sidebar-link">

                <i class="fa fa-home"></i>

                <span class="sidebar-text">Home</span>

            </a>

        </li>

        <li class="sidebar-item">

            <a href="new_entry.php" class="sidebar-link">

                <i class="fa fa-user-plus"></i>

                <span class="sidebar-text">New Entry</span>

            </a>

        </li>

        <li class="sidebar-item">

            <a href="all-Data.php" class="sidebar-link">

                <i class="fa fa-users"></i>

                <span class="sidebar-text">All Candidates</span>

            </a>

        </li>

        <li class="sidebar-item">

            <a href="global-Data.php" class="sidebar-link">

                <i class="fa fa-globe"></i>

                <span class="sidebar-text">Global Candidate</span>

            </a>

        </li>



        <li class="sidebar-item sidebar-dropdown">

            <a href="#" class="sidebar-link">

                <i class="fa fa-list-alt" aria-hidden="true"></i>

                <span class="sidebar-text">Work Status</span>

            </a>

            <ul class="sidebar-submenu">

                <?php

                    $sbsql = "SELECT * FROM status WHERE s_by = '$uadmin' ORDER BY s_pos ASC";

                    $sbrun = mysqli_query($con, $sbsql);

                    while ( $sbrows = mysqli_fetch_assoc($sbrun) ) {

                ?>

                <li><a href="status_view.php?<?php echo 'st='.$sbrows['s_id']; ?>"><?php echo $sbrows['s_name']; ?></a>

                </li>

                <?php }?>

            </ul>

        </li>

    </ul>

</div>



<!-- Logout Modal -->

<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave LeadX?</h5>

                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                Select "Logout" below if you are ready to leave LeadX.

            </div>

            <div class="modal-footer">

                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>

                <a class="btn btn-primary" href="logout.php">Logout</a>

            </div>

        </div>

    </div>

</div>









<script>

document.addEventListener('DOMContentLoaded', function() {

    const sidebar = document.querySelector('.sidebar');

    const sidebarToggle = document.querySelectorAll('.sidebar-toggle');



    // Toggle sidebar expand/collapse

    sidebarToggle.forEach(button => {

        button.addEventListener('click', function() {

            sidebar.classList.toggle('expanded');

            adjustInnerBody(); // Adjust inner-body size when sidebar expands or collapses

        });

    });



    // Close sidebar when navbar toggler is clicked (on smaller screens)

    const navbarToggle = document.querySelector('.navbar-toggler');

    navbarToggle.addEventListener('click', function() {

        sidebar.classList.remove('expanded');

        adjustInnerBody(); // Adjust inner-body size when sidebar is collapsed via navbar toggler

    });



    // Handle sidebar dropdowns on hover (desktop only)

    const sidebarItems = document.querySelectorAll('.sidebar-item');

    sidebarItems.forEach(item => {

        const submenu = item.querySelector('.sidebar-submenu');

        item.addEventListener('mouseenter', function() {

            if (window.innerWidth >= 992) { // Only for desktop view

                submenu.style.display = 'block';

                adjustInnerBody(); // Adjust inner-body size when submenu opens

            }

        });

        item.addEventListener('mouseleave', function() {

            if (window.innerWidth >= 992) { // Only for desktop view

                submenu.style.display = 'none';

                adjustInnerBody(); // Adjust inner-body size when submenu closes

            }

        });

    });



    // Function to adjust inner-body size based on sidebar's expanded state

    function adjustInnerBody() {

        const innerBody = document.getElementById('inner-body');

        const sidebarWidth = sidebar.offsetWidth;

        const windowWidth = window.innerWidth;

        const gap = 10;



        if (windowWidth >= 992) { // Only adjust for desktop view

            if (sidebar.classList.contains('expanded')) {

                innerBody.style.marginLeft = `${sidebarWidth}px`;

            } else {

                innerBody.style.marginLeft = `${sidebarWidth}px`;

            }

        } else {

            // Reset margin-left for smaller screens

            innerBody.style.marginLeft = '0';

        }

    }



    // Call adjustInnerBody initially and on window resize

    adjustInnerBody(); // Initial adjustment

    window.addEventListener('resize', adjustInnerBody); // Adjust on resize

});

</script>



<script>

document.addEventListener('DOMContentLoaded', function() {

    const dropdowns = document.querySelectorAll('.navbar-nav .dropdown-toggle');



    // Function to handle opening and closing of dropdowns on mobile

    const handleDropdownClick = function(e) {

        if (window.innerWidth < 992) { // Check if the viewport is less than 992px

            e.preventDefault();

            const menu = this.nextElementSibling;

            const isOpen = menu.classList.contains('show');



            // Close all other open dropdowns

            document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach(openDropdown => {

                if (openDropdown !== menu) {

                    openDropdown.classList.remove('show');

                    openDropdown.previousElementSibling.setAttribute('aria-expanded', 'false');

                }

            });



            // Toggle the current dropdown

            menu.classList.toggle('show', !isOpen);

            this.setAttribute('aria-expanded', !isOpen);

        }

    };



    dropdowns.forEach(dropdown => {

        dropdown.addEventListener('click', handleDropdownClick);

    });



    // Close dropdowns when clicking outside on mobile

    document.addEventListener('click', function(e) {

        if (window.innerWidth < 992 && !e.target.closest('.dropdown-toggle')) {

            document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach(openDropdown => {

                openDropdown.classList.remove('show');

                openDropdown.previousElementSibling.setAttribute('aria-expanded', 'false');

            });

        }

    });

});

</script>