Collapsible Sidebar

index.css

html,
body {
    height: 100%;
    margin: 0;
}

#wrapper {
    display: flex;
    height: 100%;
}

section {
    background-color: #ccc;
    display: inline-flex;
    justify-content: stretch;
}

#content div {
    transition: .3s ease all;
}

section.hidden #content div {
    transform: translate3d(-1px);
    margin-left: -1px;
    width: 1px !important;
}

#divider {
    background-color: #999;
    flex-grow: 0;
    flex-basis: auto;
    display: flex;
    align-items: center;
}

#divider span {
    margin: 0.25em;
}

section #divider::after {
    content: '<';
    margin: 0.5em;
}

section.hidden #divider::after {
    content: '>'
}

#wrapper div.content {
    padding: 1em;
    background-color: lightcyan;
}
#rest {
    flex-grow: 1;
}

index.html

<div id="wrapper">
    <div class="content">Test</div>
    <section>
        <div id="content">
            <div style="width: 12em;">
                <ul class="">
                    <li>Foo</li>
                    <li>Bar</li>
                    <li>Baz</li>
                </ul>
            </div>
        </div>
        <a id="divider" onclick="toggle()"></a>
    </section>
    <div id="rest" class="content">
        <p>Other content</p>
    </div>
</div>

index.js

document
    .addEventListener(
        'DOMContentLoaded', 
        () => document.querySelector('#divider')
                      .addEventListener('click', toggle)));

function toggle() {
    let ul = document.querySelector('section');
    ul.classList.toggle('hidden');
}

playground.json

‎‎​