Side Navigation

                
                    <div class="sidenav-body">
                        <div class="topnav top">
                        </div>
                        <div class="sidenav">
                            <ul class="sidenav-list">
                                <li class="items">
                                    <div class="avatar avatar-xs-size">
                                        <img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
                                    </div>
                                    List item
                                </li>
                                <li class="items">
                                    <div class="avatar avatar-xs-size">
                                        <img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
                                    </div>
                                    List item
                                </li>
                            </ul>
                        </div>
                    </div>
                
            

                
                    <div class="sidenav-body">
                        <div class="topnav">
                            <i class="fa fa-bars hamburger" id="hamburger"></i>
                        </div>
                        <div class="sidenav toggle-sidenav" id="sidenav">
                            <ul class="sidenav-list">
                                <li class="items">
                                    <div class="avatar avatar-xs-size">
                                        <img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
                                    </div>
                                    List item
                                </li>
                                <li class="items">
                                    <div class="avatar avatar-xs-size">
                                        <img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
                                    </div>
                                    List item
                                </li>
                            </ul>
                        </div>
                    </div>
                
            

                
                    const hamburger = document.querySelector("#hamburger")
                    const sidenav = document.querySelector("#sidenav")

                    hamburger.addEventListener("click", () => {
                        if(sidenav.style.width === "12rem"){
                            sidenav.style.width = "0"
                        } else {
                            sidenav.style.width = "12rem"
                        }
                    })