/
navbar.html
40 lines (40 loc) · 1.6 KB
/
navbar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<header class="navbar">
<div class="navbar-container container">
<nav aria-label="Primary">
<a href="#page-content" class="screen-reader-only skip-navigation">Skip to content</a>
<a class="navbar-branding outline-offset" href="/" aria-label="Home page" {% if permalink == "/" %}aria-current="page"{% endif %}>
<img src="/assets/images/favicons/favicon-128.png" class="navbar-logo circle" alt="" width="28" height="28">
<span>Aleksandr Hovhannisyan</span>
</a>
<ul class="navbar-links">
{%- comment -%}Only show this home link on mobile view.{%- endcomment -%}
<li class="navbar-item home">
<a class="navbar-link" href="/" {% if permalink == "/" %}aria-current="page"{% endif %}>Home</a>
</li>
{%- assign navLinks = "About,Art,Blog" | split: ',' -%}
{%- for link in navLinks -%}
<li class="navbar-item">
{%- assign href = link | downcase | prepend: "/" | append: "/" -%}
<a
class="navbar-link"
href="{{ href }}"
{% if permalink == href -%}
aria-current="page"
{%- endif -%}
{% if link == 'Blog' and isBlogPage -%}
aria-current="page"
{%- endif -%}
>
{{- link -}}
</a>
</li>
{%- endfor -%}
</ul>
</nav>
<button id="theme-toggle" class="lamp" aria-label="Enable dark mode theme" aria-pressed="false" type="button">
<span class="lamp-base"></span>
<span class="lamp-neck"></span>
<span class="lamp-head"></span>
</button>
</div>
</header>