Animer une sidebar avec CSS

Voir https://blog.pagesd.info/2020/06/01/animation-css-sidebar/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div id="wrapper">

    <!-- Sidebar -->
    <nav id="sidebar">

        <div class="sidebar-header">
            <h3><a href="#">Clic 3</a></h3>
        </div>

        <ul class="sidebar-menu list-unstyled">
            <li><a href="#">Entrée</a></li>
            <li><a href="#">Plat</a></li>
            <li><a href="#">Fromage</a></li>
            <li><a href="#">Dessert</a></li>
        </ul>

    </nav>

    <!-- Page Content -->
    <div id="content">
        <a href="#" id="sidebar-toggle"></a>

        <h1>Titre de la page</h1>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
            eget purus quis quam finibus condimentum nec euismod lorem.
            Nullam non luctus nunc. Vestibulum in pretium ex. Duis sed
            rhoncus felis, vitae scelerisque elit. Vestibulum suscipit ac
            tortor nec varius. Vivamus faucibus vestibulum justo ullamcorper
            tempor. Vestibulum ac ligula interdum, rhoncus tellus vel,
            laoreet elit. Sed est erat, mollis quis accumsan vel, malesuada
            eget lorem. Curabitur quis mattis nulla. Curabitur blandit,
            nulla vitae venenatis varius, purus orci tincidunt enim, a
            tincidunt eros nisl a leo. Duis et sapien ac urna porta eleifend
            nec sit amet urna. Donec augue elit, tristique sit amet
            efficitur et, pulvinar sed est.
        </p>

        <p>Curabitur lacinia mattis posuere. Suspendisse sollicitudin sit amet odio nec iaculis. Donec mi urna, dapibus et turpis ac, porta finibus nulla. Nulla ac elit felis. Maecenas sed tortor ultricies, tincidunt erat vel, aliquam erat. Sed mollis tristique elementum. Cras sed sagittis magna. Donec convallis, massa eu faucibus tempor, nunc mauris rutrum arcu, nec consectetur...

CSS

/*
    Layout
*/

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

#sidebar {
    background-color: pink; /* debug */
    min-height: 100vh;
    position: fixed;
    transition: all 0.25s;
    width: 299px;
}

#content {
    min-height: 100vh;
    position: absolute;
    right: 0;
    transition: all 0.25s;
    width: calc(100% - 299px);
}

.no-sidebar #sidebar {
    margin-left: -299px;
}

.no-sidebar #content {
    width: 100%;
}


/*
    Masquer / Afficher la sidebar
*/

#sidebar-toggle {
    background-color: orange;
    border-radius: 50%;
    display: block;
    height: 2.2rem;
    left: -1.15rem;
    position: absolute;
    text-decoration: none;
    top: 7px;
    width: 2.2rem;
}

#sidebar-toggle::after {
    content: "🡐";
    color: white;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    margin: -.2rem 0 0 0;
    text-align: center;
}

#sidebar-toggle:hover {
    background-color: goldenrod;
}

.no-sidebar #sidebar-toggle::after {
    content: "🡒";
    margin-left: .2rem;
}


/*
    Cache la "sidebar" à l'impression
*/

@media print {
    #sidebar { display: none; }
    #sidebar-toggle { display: none; }
    #content { width: 100%; }
}


/*
    Présentation
*/

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

#sidebar {
    background-color: pink;
}

#content {
    padding: 30px;
}

.scroll {
    margin-bottom: 50rem;
}

.sidebar-header {
    background-color: hotpink;
}

.sidebar-header a {
    display: block;
    padding: 30px;
    text-decoration: none;
}

.sidebar-menu a {
    display: block;
    padding: 10px 30px;
    text-decoration: none;
}

.sidebar-menu a:hover {
    background-color: white;
}

#content {
    padding-top: 15px;
}

h1 {
    margin-bottom: 30px;
}

JavaScript

$(document).ready(function () {

    $("#sidebar-toggle").on("click", function () {
        $("#wrapper").toggleClass("no-sidebar");
    });

});