web/_includes/sidebar.html

<!--
  The Side Bar
  v2.0
  https://github.com/cotes2020/jekyll-theme-chirpy
  © 2017-2019 Cotes Chung
  MIT License
-->

<div id="nav-wrapper">
  <div id="profile-wrapper" class="d-flex flex-column">
    <div id="avatar" class="d-flex justify-content-center">
      <a href="{{ site.baseurl }}/" alt="avatar">
        {% assign avatar_url = site.avatar %}
        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
        {% if start == '/' %}
          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
        {% endif %}
        <img src="{{ avatar_url }}" alt="avatar">
      </a>
    </div>

    <div class="profile-text mt-3">
      <div id="site-title">
        <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
      </div>
      <div id="site-subtitle" class="font-italic">{{- site.tagline -}}</div>
    </div>
  </div>

  <ul class="nav flex-column">
  {% assign page_urls = page.url | split: "/" %}

  {% for item in site.data.label.tabs %}
    {% assign ref = site.baseurl | append: "/" %}

    {% if item.path %}
      {% assign ref = ref | append: item.path | append: "/" %}
      {% if item.url %}
        {% assign ref = ref | append: item.url | append: "/" %}
      {% endif %}
    {% endif %}

    <li class="nav-item d-flex justify-content-center
      {% if item.url == page_urls.last
        or item.name == page.tab_active
        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
        <i class="fa-fw {{ item.icon }} ml-3 mr-3 unloaded"></i>
        <span>{{ item.name | upcase }}</span>
      </a>
    </li> <!-- .nav-item -->
  {% endfor %}

  </ul> <!-- ul.nav.flex-column -->

</div><!-- #nav-wrapper -->

<div class="sidebar-bottom d-flex justify-content-around mt-4">

  <span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
    {% include dark-mode-toggle.html %}
  </span>

  <a href="https://github.com/{{ site.github.username }}" target="_blank">
    <i class="fab fa-github-alt"></i>
  </a>
  <a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
    <i class="fab fa-twitter"></i>
  </a>
  {% assign email = site.social.email | split: '@' %}
  <a href="javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))">
    <i class="fas fa-envelope"></i>
  </a>
  <a href="{{ site.baseurl }}/feed.xml" target="_blank">
    <i class="fas fa-rss"></i>
  </a>

</div>