Hides Left Navigation by default in SharePoint

SharePoint Navigation

CSS and JS to Retract Navigation in SharePoint 2013

SharePointNavigation.css

/* ************* side navagation box retract  ************  */

#sideNavBox.wcCondensed {
  position: absolute;
  background: #fff;
  z-index: 12;
  transition: all 1s;
  padding: 5px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
}

#sideNavBox.hidden {
  transform: translateX(-190px);
  transition: all 1s;
  background: #0072c6;
  height: 30px;
  border-radius: 25px;
}

#sideNavBox.hidden:hover {
  transform: translateX(-180px);
}

#sideNavBox.hidden .menu-item {
  width: 120px;
}

#sideNavBox.hidden:after {
  content: '\f0c9';
  color: black;
  top: 10px;
  left: 170px;
  position: absolute;
  width: 150px;
  font-size: 18px;
  font-family: FontAwesome;
  color: white;
}


/* adjust position of main content */

#contentBox.wcCondensed {
  margin-left: 20px!important;
}

#contentBox {
  transition: margin 1s;
}

SharePointNavigation.js

	/* retractable left navigation column 
	   Add "noOverlap" parameter to dynamically adjust content, 
	   otherwise left Nav will overlap the main content
	   Example: retractNavigation('noOverlap');
	   or
	   Example: retractNavigation();
	 */

const retractNavagation = function (noOverlap) {
    var slideMenu = document.querySelector("#sideNavBox");
    var mainContent = document.querySelector('#contentBox')
    var titleRow = document.getElementById("s4-titlerow")

    slideMenu.classList.add("hidden");
    slideMenu.classList.add("wcCondensed")
    mainContent.classList.add('wcCondensed')

    noOverlap = noOverlap || 'overlap'

    mainContent.addEventListener("click", function (x) {
        slideMenu.classList.add("hidden");
        if (noOverlap === 'noOverlap') {
            mainContent.classList.add('wcCondensed')
        }
    });
    titleRow.addEventListener("click", function (x) {
        slideMenu.classList.add("hidden");
        if (noOverlap === 'noOverlap') {
            mainContent.classList.add('wcCondensed')
        }
    });
    slideMenu.addEventListener("click", function (e) {
        slideMenu.classList.remove("hidden");
        if (noOverlap === 'noOverlap') {
            mainContent.classList.remove('wcCondensed')
        }
    });
}