Redmine Toggle sidebar

scripts.js

var button = document.createElement('div');
button.innerHTML = '>';
button.setAttribute('id', 'sidbar-collapse');
var sidebar = document.getElementById('sidebar');
button.onclick = () => {
  sidebar.classList.toggle('collapse');
  button.innerHTML = button.innerText == '>' ? '<' : '>';
};
sidebar.appendChild(button);
button.click();

style.css

#content {
    width: 100%;
}

#sidebar {
    background: white;
    width: 177px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    transition: width .3s ease;
}

#sidebar #sidbar-collapse {
    background: rgba(62, 69, 76);
    border: #2a333a;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    color: #9ba1a5;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    margin-left: -10px;
    padding: 20px 2px;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
}

#sidebar.collapse {
    margin: 0;
    padding: 0;
    width: 0;
    transition: width .2s ease;
}

#sidebar.collapse #sidbar-collapse {
    margin-left: 15px;
}

#sidebar h3, #sidebar ul, #sidebar a {
    white-space: nowrap;
}

#sidebar.collapse h3, #sidebar.collapse ul, #sidebar.collapse a {
    display: none;
}