Redmine hide sidebar

script.js

var toggle = document.createElement('div');
var sidebar = document.getElementById('sidebar');
toggle.innerHTML = '>';
toggle.classList.add('toggle-sidebar');
toggle.classList.add('open');
toggle.addEventListener('click', function() {
  sidebar.classList.toggle('hidden');
  toggle.classList.toggle('open');
  setTimeout(function() {
    toggle.innerHTML = sidebar.classList.contains('hidden') ? '<' : '>';
  }, 200);
});
sidebar.prepend(toggle);
toggle.click();

style.css

.toggle-sidebar {  
  position: absolute;
  width: 15px;
  height: 51px;
  right: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #454e56;
  color: white;
  font-weight: bold;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  top: 80px;
  cursor: pointer;
  transition: right 10ms ease .15s;
}

.toggle-sidebar.open {
  right: 100%;
  transition: right 150ms ease;
}

#sidebar {
  width: 160px;
  padding-left: 10px;
  transition: width .15s ease, padding-left 10ms ease .15ms;
}

#sidebar > * {
  white-space: nowrap;
}

#sidebar.hidden {
  width: 0;
  padding-left: 0;
  transition: width .15s ease;
}

#sidebar.hidden > *:not(.toggle-sidebar) {
  opacity: 0;
  transition: opacity .1s ease .1s;
}

#content {
  width: 100%;
}