<?php
$menu_toggle = '

<button type="button" id="menu-toggle" onclick="toggleMenu()">
    <span></span>
    <span></span>
    <span></span>
</button>

<style>
#menu-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: #333;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 3px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
#menu-toggle:hover {
    background: #555;
}
#menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 1px;
}
</style>

<script>
var menuVisible = true;
function toggleMenu() {
    var toggleBtn = document.getElementById("menu-toggle");
    
    var sidebar = document.querySelector(".sidebar-offcanvas");
    if(sidebar) {
        sidebar.style.display = menuVisible ? "none" : "block";
    }
    
    var content = document.querySelector(".col-xs-12.col-sm-9");
    if(!content) content = document.querySelector(".col-xs-12");
    
    if(content) {
        if(menuVisible) {
            content.style.width = "100%";
            content.style.maxWidth = "100%";
        } else {
            content.style.width = "";
            content.style.maxWidth = "";
        }
    }
    
    var row = document.querySelector(".row-offcanvas");
    if(row) {
        if(menuVisible) {
            row.style.marginLeft = "0";
        } else {
            row.style.marginLeft = "";
        }
    }
    
    if(menuVisible) {
        toggleBtn.innerHTML = "<span style=\"transform: rotate(45deg); position: absolute;\"></span><span style=\"opacity: 0;\"></span><span style=\"transform: rotate(-45deg); position: absolute;\"></span>";
    } else {
        toggleBtn.innerHTML = "<span></span><span></span><span></span>";
    }
    
    menuVisible = !menuVisible;
}
</script>
';
echo $menu_toggle;
?>