function openNav() {
    document.getElementById("mySidebar").style.width = "18rem";
    document.getElementById("navMain").style.width = "18rem";
    document.getElementById("mySidebar").style.margin = "0";
    document.getElementById("mySidebar").style.borderRadius = "0";
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "5rem";
    document.getElementById("navMain").style.width = "5rem";
    document.getElementById("mySidebar").style.margin = "0.5rem 0 0.5rem 0";
    document.getElementById("mySidebar").style.borderRadius = "0 0.5rem 0.5rem 0";
}

function doShowChildren(id) {
    document.getElementById(id).style.display = "block";
    console.log(id);
}

function doHideChildren(id) {
    document.getElementById(id).style.display = "none";
    console.log(id);
}

function selectItem(id) {
    console.log(id);
    document.getElementById(id).style.backgroundPosition = "left";
    document.getElementById("btn" + id).style.transform = "rotate(-90deg)";
    document.getElementById("opt" + id).style.visibility = "visible";
    document.getElementById("opt" + id).style.opacity = "1";
    //document.getElementsByClassName("hoverOptions").style.display = "block";
}

function unSelectItem(id) {
    console.log(id);
    document.getElementById(id).style.backgroundPosition = "right";
    document.getElementById("btn" + id).style.transform = "rotate(0deg)";
    document.getElementById("opt" + id).style.visibility = "hidden";
    document.getElementById("opt" + id).style.opacity = "0";
}

function isEditing(id) {
    document.getElementById("lblCate" + id).disabled = false;
    document.getElementById("lblCate" + id).style.borderBottom = "1px solid #000";
    document.getElementById("editBlock" + id).style.display = "flex";
    document.getElementById("visualBlock" + id).style.display = "none";
}

function noEditing(id) {
    document.getElementById("lblCate" + id).disabled = true;
    document.getElementById("lblCate" + id).style.borderBottom = "none";
    document.getElementById("editBlock" + id).style.display = "none";
    document.getElementById("visualBlock" + id).style.display = "flex";
}

function showAddNew() {
    document.getElementById("addNew").style.width = "25rem";
    document.getElementById("addNew").style.height = "15rem";
    document.getElementById("addNew").style.top = "3.7rem";
    document.getElementById("addNew").style.backgroundColor = "#ebf2fd";
    document.getElementById("addNew").style.opacity="1";
    document.getElementById("dropContent").style.opacity="1";
}
function hideAddNew() {
    document.getElementById("addNew").style.width = "0";
    document.getElementById("addNew").style.height = "0";
    document.getElementById("addNew").style.top = "0";
    document.getElementById("addNew").style.opacity="0";
    document.getElementById("dropContent").style.opacity="0";
}