sidebar.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <h1>
        <a href="{{ site.baseurl }}">
         {{ 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="{{ site.baseurl }}">Home</a>
      <a class="sidebar-nav-item {% if page.url == node.url %} active{% endif %}" href="{{ '/motivation' | prepend: site.baseurl }}">Motivation</a>
      
      <!-- An example of a section with drop-down menu -->
      <button class="dropdown-btn">Methods
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-container">
          <a href="{{ '/method1' | prepend: site.baseurl }}">Method 1</a><br/>
          <a href="{{ '/method2' | prepend: site.baseurl }}">Method 2</a>
      </div>
      
      <a class="sidebar-nav-item {% if page.url == node.url %} active{% endif %}" href="{{ '/results' | prepend: site.baseurl }}">Results</a>
      <a class="sidebar-nav-item {% if page.url == node.url %} active{% endif %}" href="{{ '/about' | prepend: site.baseurl }}">About</a>

      <script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>

      {% comment %}
        The code below dynamically generates a sidebar nav of pages with
        `layout: page` in the front-matter. See readme for usage.
      {% endcomment %}

      {% comment %}
      {% 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 | prepend: site.baseurl }}">{{ node.title }}</a>
          {% endif %}
        {% endif %}
      {% endfor %}
      {% endcomment %}

      <a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub</a>
      <span class="sidebar-nav-item">v{{ site.version }}</span>
    </nav>

    <p>&copy; {{ site.time | date: '%Y' }}. All rights reserved.</p>
  </div>
</div>