var backendNavIcon = document.querySelectorAll('.f-icon');
var backendNavWrapper = document.getElementById('backend-nav');
var backendNavClose = document.getElementById('backend-nav-close');
width = window.getComputedStyle(backendNavWrapper, "width");
var backendCloseContainer = document.createElement('div');

for(var i = 0; i<backendNavIcon.length; i++){
    // console.log(width);
    backendNavIcon[i].addEventListener('mouseover', function(e){
        if(width['width'] == "0px"){
            backendNavWrapper.style.display = "block";
            for(var i = 0; i<=210; i++){
                setTimeout(function(e){
                    backendNavWrapper.style.width = i+"px";
                },5);
            }
            var backendHtmlBody = document.querySelector('body');

            backendCloseContainer.setAttribute('class', 'clickContainerclass');
            backendHtmlBody.appendChild(backendCloseContainer);
            backendCloseContainer.style.display = "block";
        }else{

        }
    });
    backendNavWrapper.addEventListener('mouseleave', function(e){
        width = window.getComputedStyle(backendNavWrapper, "width");
        if(width['width'] == "211px"){
            for(var i = 210; i>0; i--){
                setTimeout(function(e){
                    backendNavWrapper.style.width = i+"px";
                },5);
            }
            backendCloseContainer.style.display = "none";
            if(i == 0){
                // backendNavWrapper.style.display = "none";
            }
        }
    });
    backendCloseContainer.addEventListener('mouseover', function(e){
        width = window.getComputedStyle(backendNavWrapper, "width");
        if(width['width'] == "211px"){
            for(var i = 210; i>0; i--){
                setTimeout(function(e){
                    backendNavWrapper.style.width = i+"px";
                },5);
            }
            backendCloseContainer.style.display = "none";
            if(i == 0){
                // backendNavWrapper.style.display = "none";
            }
        }
    });
}



// backendNavClose.addEventListener('click', function(e){
//  width = window.getComputedStyle(backendNavWrapper, "width");
//  if(width['width'] == "210px"){
//      for(var i = 210; i>0; i--){
//          setTimeout(function(e){
//              backendNavWrapper.style.width = i+"px";
//              console.log(i);
//          },10);
//          if(i<){
//                  backendNavWrapper.style.display = "none";
//              }
//      }
//  }
// });