web/_includes/sidebar.html
Cotes Chung 8d4c1deb15 Improve web accessibility
- Add associated label to form elements.
- Add discernible name to links.
2020-10-27 16:42:08 +08:00

90 lines
2.9 KiB
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" onerror="this.style.display='none'">
</a>
</div>
<div class="profile-text mt-3">
<div class="site-title">
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
</div>
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
</div>
</div>
<ul class="nav flex-column">
{% assign page_urls = page.url | split: "/" %}
{% for item in site.data.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-xl-3 mr-xl-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 flex-wrap justify-content-around mt-4">
{% if site.theme_mode == "dual" %}
<span id="mode-toggle-wrapper">
{% include mode-toggle.html %}
</span>
<span class="icon-border"></span>
{% endif %}
{% 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 entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
<i class="{{ entry.icon }}"></i>
</a>
{% endif %}
{% endfor %}
</div>