let rotated = false;
const image = document.getElementById("rotateImage");
const menu = document.getElementById("menu");
const buttons = document.querySelectorAll(".menu-button");

function toggleImage() {
    if (rotated) {
        image.style.transform = "rotate(0deg)";
        menu.style.animation = "fade-out 0.2s ease-in-out forwards";
        buttons.forEach((button, index) => {
            setTimeout(() => {
                button.style.animation = "fade-out 0.3s ease-in-out forwards";
                setTimeout(() => {
                    button.style.display = "none";
                }, 500);
            }, 80 * index);
        });
        rotated = false;
    } else {
        image.style.transform = "rotate(270deg)";
        menu.style.animation = "fade-in 0.2s ease-in-out forwards";
        buttons.forEach((button, index) => {
            setTimeout(() => {
                button.style.animation = "fade-in 0.3s ease-in-out forwards";
                button.style.display = "block";
            }, 80 * index);
        });
        menu.style.display = "block";
        rotated = true;
    }
}

document.addEventListener("DOMContentLoaded", function () {
    var buttons = document.querySelectorAll(".menu-button");
    buttons.forEach(function (button) {
        button.addEventListener("click", function () {
            var pageName = button.getAttribute("data-page");
            if (pageName) {
                window.location.href = pageName;
            }
        });
    });
});