web/_includes/sidebar.html

<!-- The Side Bar -->

<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
  <header class="profile-wrapper">
    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
      {% if site.avatar != empty and site.avatar %}
        {% capture avatar_url %}
            {% if site.avatar contains '://' %}
              {{ site.avatar }}
            {% elsif site.img_cdn != empty and site.img_cdn %}
              {{ site.avatar | prepend: site.img_cdn }}
            {% else %}
              {{ site.avatar | relative_url }}
            {% endif %}
          {% endcapture %}
        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
      {% endif %}
    </a>

    <h1 class="site-title">
      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
    </h1>
    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
  </header>
  <!-- .profile-wrapper -->

  <nav class="flex-column flex-grow-1 w-100 ps-0">
    <ul class="nav">
      <!-- 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"></i>
          <span>{{ site.data.locales[include.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 }}"></i>
            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}

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

  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
    {% unless site.theme_mode %}
      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
        <i class="fas fa-adjust"></i>
      </button>

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

    <address class="d-flex mb-0">
      {% for entry in site.data.contact %}
        {% case entry.type %}
          {% when 'github', 'twitter' %}
            {%- capture url -%}
            https://{{ entry.type }}.com/{{ site[entry.type].username }}
          {%- endcapture -%}
          {% when 'email' %}
            {% assign email = site.social.email | split: '@' %}
            {%- capture url -%}
            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
          {%- endcapture -%}
          {% when 'rss' %}
            {% assign url = '/feed.xml' | relative_url %}
          {% else %}
            {% assign url = entry.url %}
        {% endcase %}

        {% if url %}
          <a
            href="{{ url }}"
            aria-label="{{ entry.type }}"
            {% assign link_types = '' %}

            {% unless entry.noblank %}
              target="_blank"
              {% assign link_types = 'noopener noreferrer' %}
            {% endunless %}

            {% if entry.type == 'mastodon' %}
              {% assign link_types = link_types | append: ' me' | strip %}
            {% endif %}

            {% unless link_types == empty %}
              rel="{{ link_types }}"
            {% endunless %}
          >
            <i class="{{ entry.icon }}"></i>
          </a>
        {% endif %}
      {% endfor %}
    </address>
  </div>
  <!-- .sidebar-bottom -->
</aside>
<!-- #sidebar -->