JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuhoz" class="menuhoz">
    <img id="imgmenuhoz" src="http://www.zupmage.eu/i/BdD50UvFdR.png"></img><span>MENU</span>

</div>

CSS

#crosscol {
    margin:0;
}
.menuhoz {
    background-color:#171717;
    color:#ff9900;
    height:50px;
    width:50px;
    line-height:50px;
    text-align:center;
    transition:all 0.5s;
}
.menuhoz:hover {
    color:#171717;
    background-color:#ff9900;
    cursor:pointer;
}
.menuhoz #imgmenuhoz {
    width:0px;
    height:0px;
    margin-top:2px;
    margin-left:2px;
    cursor:pointer;
    float:left;
}

JavaScript

var MENUHOZ = document.getElementById("menuhoz")
var IMG = document.getElementById("imgmenuhoz")

MENUHOZ.style.cssText = 'transition:all 1s;';
IMG.style.cssText = 'transition:all 1s 1s;';

MENUHOZ.onclick = function () {
    this.clicked = true;
    toggle(this.clicked);
}

IMG.onclick = function (e) {
    e.stopPropagation();
    MENUHOZ.clicked = false;
    toggle(MENUHOZ.clicked);
}


function toggle(sens) {
    console.log(sens)
    if (sens) {
        MENUHOZ.style.cssText = 'background-color:#ff9900;color:#171717;cursor:default';
        MENUHOZ.style.width = '100%';
        MENUHOZ.style.height = '100px';
        IMG.style.width = '15px';
        IMG.style.height = '15px';

    } else {
        MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
        MENUHOZ.style.width = '50px';
        MENUHOZ.style.height = '50px';
        IMG.style.width = '0px';
        IMG.style.height = '0px';
    }
}