Write a function that should check if a checkbox is checked and do an action, example:

checkboxAction('unlimitedEmps', () => {
  // Do something
}); // If the unlimitedEmps is off, the function should stop

Code:

// ==UserScript==
// @name         Custom Draggable Debug Menu - Dark Mode with Transitions Fixed
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adds a custom draggable debug menu with styled checkboxes, now in dark mode with minimize/restore transitions.
// @author       YSSF
// @match        https://zty.pe/
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    // Create the menu container
    const menu = document.createElement('div');
    menu.id = 'custom-debug-menu';
    menu.innerHTML = `
        <div id="debug-menu-header">
            <span>Debug Menu</span>
            <button id="debug-menu-toggle">−</button>
        </div>
        <div id="debug-menu-content">
            <label class="switch">
                <input type="checkbox" id="unlimitedEmps">
                <span class="slider"></span>
                <span class="label-text">Unlimited EMPs</span>
            </label>
            <label class="switch">
                <input type="checkbox" id="invincible">
                <span class="slider"></span>
                <span class="label-text">Invincible</span>
            </label>
        </div>
    `;
    document.body.appendChild(menu);

    // Add styles
    const styles = document.createElement('style');
    styles.innerHTML = `
        #custom-debug-menu {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 200px;
            background-color: #333;
            color: #fff;
            border: 1px solid #555;
            z-index: 9999;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border-radius: 8px;
            overflow: hidden;
            user-select: none;
            font-family: Arial, sans-serif;
        }
        #debug-menu-header {
            background-color: #444;
            color: #fff;
            padding: 10px;
            cursor: move;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #debug-menu-header span {
            font-weight: bold;
        }
        #debug-menu-header button {
            background: none;
            color: #fff;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        #debug-menu-content {
            padding: 10px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            max-height: 1000px;
            opacity: 1;
        }
        .switch {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .switch input {
            display: none;
        }
        .slider {
            position: relative;
            width: 40px;
            height: 20px;
            background-color: #666;
            border-radius: 20px;
            margin-right: 10px;
            transition: background-color 0.3s;
            cursor: pointer;
        }
        .slider::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            top: 2px;
            background-color: #fff;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider::before {
            transform: translateX(20px);
        }
        .label-text {
            flex-grow: 1;
            color: #fff;
        }
    `;
    document.head.appendChild(styles);

    // Make the menu draggable
    dragElement(menu);

    function dragElement(el) {
        const header = document.getElementById('debug-menu-header');
        let posX = 0, posY = 0, mouseX = 0, mouseY = 0;
        if (header) {
            header.onmousedown = dragMouseDown;
        } else {
            el.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            mouseX = e.clientX;
            mouseY = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            posX = mouseX - e.clientX;
            posY = mouseY - e.clientY;
            mouseX = e.clientX;
            mouseY = e.clientY;
            el.style.top = (el.offsetTop - posY) + 'px';
            el.style.left = (el.offsetLeft - posX) + 'px';
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Set initial maxHeight of content
    const content = document.getElementById('debug-menu-content');
    content.style.maxHeight = content.scrollHeight + 'px';

    // Minimize/Restore functionality with transitions
    const toggleButton = document.getElementById('debug-menu-toggle');
    let isMinimized = false;

    toggleButton.addEventListener('click', () => {
        if (isMinimized) {
            // Restore
            content.style.maxHeight = content.scrollHeight + 'px';
            content.style.opacity = '1';
            content.style.padding = '10px'; // Restore padding
            toggleButton.innerHTML = '−';
            isMinimized = false;
        } else {
            // Minimize
            content.style.maxHeight = '0px';
            content.style.opacity = '0';
            content.style.padding = '0px'; // Remove padding
            toggleButton.innerHTML = '+';
            isMinimized = true;
        }
    });
})();