web/_includes/sidebar.html

<!--
  The Side Bar
-->

<div id="sidebar" class="d-flex flex-column align-items-end" lang="{{lang}}">
  <div class="profile-wrapper text-center">
    <div id="avatar">
      <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
        {% capture avatar_url %}
          {%- if site.avatar contains '://' -%}
            {{ site.avatar }}
          {%- elsif site.img_cdn != '' and site.img_cdn -%}
            {{ site.avatar | prepend: site.img_cdn }}
          {%- else -%}
            {{ site.avatar | relative_url }}
          {%- endif -%}
        {% endcapture %}
        <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
      </a>
    </div>

    <div class="site-title mt-3">
      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
    </div>
    <div class="site-subtitle font-italic">{{ site.tagline }}</div>

  </div><!-- .profile-wrapper -->

  <ul class="w-100">

    <!-- home -->
    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
      <a href="{{ '/' | relative_url }}" class="nav-link">
        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
      </a>
    </li>
    <!-- the real tabs -->
    {% for tab in site.tabs %}
    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
      <a href="{{ tab.url | relative_url }}" class="nav-link">
        <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}

        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab_name | upcase }}</span>
      </a>
    </li> <!-- .nav-item -->
    {% endfor %}

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

  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">

    {% for entry in site.data.contact %}
      {% capture url %}
        {%- if entry.type == 'github' -%}
          https://github.com/{{ site.github.username }}
        {%- elsif entry.type == 'twitter' -%}
          https://twitter.com/{{ site.twitter.username }}
        {%- elsif entry.type == 'email' -%}
          {% assign email = site.social.email | split: '@' %}
          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
        {%- elsif entry.type == 'rss' -%}
          {{ "/feed.xml" | relative_url }}
        {%- else -%}
          {{ entry.url }}
        {%- endif -%}
      {% endcapture %}

      {% if url %}
      <a href="{{ url }}" aria-label="{{ entry.type }}"
        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
        <i class="{{ entry.icon }}"></i>
      </a>
      {% endif %}

    {% endfor %}

    {% unless site.theme_mode %}
      {% if site.data.contact.size > 0 %}
        <span class="icon-border order-2"></span>
      {% endif %}

      <span id="mode-toggle-wrapper" class="order-1">
        {% include mode-toggle.html %}
      </span>
    {% endunless %}

  </div> <!-- .sidebar-bottom -->

</div><!-- #sidebar -->