<strong id=“nav-handler” style=“cursor: pointer;”>
MENU
</strong>
<div class=“sidebar” id=“sidebar”>
<div class="container"> <div class="sidebar-about"> <h1> <a href="{{ site.baseurl | relative_url }}"> {{ site.title }} </a> </h1> <p class="lead">{{ site.description }}</p> </div> <nav class="sidebar-nav"> <a class="sidebar-nav-item{% if page.url == site.baseurl %} active{% endif %}" href="/" >Home</a > {% comment %} The code below dynamically generates a sidebar nav of pages with `layout: page` in the front-matter. See readme for usage. {% endcomment %} {% assign pages_list = site.pages %} {% for node in pages_list %} {% if node.title != null %} {% if node.layout == "page" %} <a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="/{{ node.url | relative_url }}" >{{ node.title }}</a > {% endif %} {% endif %} {% endfor %} <p>© {{ site.time | date: '%Y' }}. All rights reserved.</p> </div>
</div>
<script>
const navHandler = document.querySelector('#nav-handler'); const sidebar = document.querySelector('#sidebar'); navHandler.addEventListener('click', () => { sidebar.classList.toggle('show'); });
</script>