<!— CHANGE SIDE NAV PHOTO AND OVERLAY TEXT HERE –> <div class=“nav_image_container”>

<a href="{{ site.baseurl }}/"><img class="nav_image" src="{{ site.baseurl }}/assets/daphne.png"></a>
<a class="nav_image_overlay" href="{{ site.baseurl }}/"
  style="font-family: Zilla Slab; font-weight: 400; font-size: 72px; line-height: 72px">Baby <br>Steps</a>

</div>

<h3>This blog is where I post up various half-baked ideas that I have.</h3>

<!—COLLAPSIBLE SIDE NAV LINKS –>

<nav>

<button type="button" class="collapsible">Categories</button>
<div class="content">
  <ul style="list-style-type:none;">
    {% for categories in site.categories %}
    <li><a style="font-family: DM Mono, monospace" href="{{site.baseurl}}/categories/{{categories[0]}}">{{
        categories[0] }}</a></li>
    {% endfor %}
  </ul>
</div>
<h4><a href="{{site.baseurl}}/about" class="listing_title">About</a>
  <h4>
    <br>

    <!---SOCIAL PROFILE LINKS -->

    <div class="footer-col footer-col-2">
      <ul class="social-media-list" style="list-style-type:none; padding-left:0;">
        {% if site.github_username %}
        <li>
          {% include icon-github.html username=site.github_username %}
        </li>
        {% endif %}

        {% if site.twitter_username %}
        <li>
          {% include icon-twitter.html username=site.twitter_username %}
        </li>
        {% endif %}
      </ul>
    </div>

</nav>

<!—COLLAPSIBLE CATEGORY MENU SCRIPT –>

<script>

var coll = document.getElementsByClassName("collapsible");
var i;

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

</script>