<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>&copy; {{ 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>