let handleMenu = (currentWidth) => {
    const menu = document.getElementsByClassName("menu")[0];

    if (menu !== undefined) {
        menu.setAttribute("onclick", "toggleMenu(this)");
    }

    let mobileScreenSize = currentWidth < minDesktopWidth ? true : false;

    let menuParent = document.querySelector("nav");

    let menuExists = () => {
        for (let child of menuParent.children) {
            if (child === menu) {
                return true;
            }
        }

        return false;
    }

    if (mobileScreenSize) {
        if (menu === undefined && !menuExists()) {
            loadMenu(menuParent);
        }
    }
    else {
        if (menu !== undefined) {
            menu.removeAttribute("onclick");
            menuParent.removeChild(menu);
        } else {
            console.log("I am on desktop and menu doesn't exists! That's good tho")
        }
    }
}

let loadMenu = (menuParent) => {
    let menuRoot = document.createElement("div");
    menuRoot.setAttribute("class", "menu");

    let menuBars = new Array (3);
    let i = 1;
    for (let bar of menuBars) {
        bar = document.createElement("div");
        bar.setAttribute("class", "bar" + i.toString());
        menuRoot.appendChild(bar);
        i++;
    }

    menuRoot.setAttribute("onclick", "toggleMenu(this)");

    menuParent.appendChild(menuRoot);
}