HTML CSS
(quick & simple example)
LEFT : SIDEBAR <nav id="page-side"> <a href="#">First</a> <a href="#">Second</a> </nav>
RIGHT : CONTENTS <main id="page-main"> <button id="side-button" onclick="sidebar()">☰</button> <p>Contents</p> </main>
function sidebar () { document.getElementById ("page-side").classList.toggle("show"); }
FLEX LAYOUT BODY body { display: flex; min-height: 100vh; padding: 0; margin: 0; }
TOGGLE SIDEBAR SHOW/HIDE #page-side { width: 0; visibility: hidden; } #page-side.show { width: 150px; visibility: visible; }
FLEX GROW MAIN CONTENTS #page-main { flex-grow: 1; }