_includes/header.html in hima-1.0.5 vs _includes/header.html in hima-1.1.0

@@ -1,8 +1,8 @@
 {%- assign default_paths = site.pages | map: "path" -%}
 {%- assign page_paths = site.header_pages | default: default_paths -%}
-{%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
+{%- assign titles_size = site.pages | where_exp: 'page', 'page.title.size > 0' | size -%}
 
 <header class="header">
   <div class="header__container">
     <div class="header__title">
       {%- if page.layout == 'home' -%}
@@ -12,21 +12,38 @@
       {%- endif -%}
     </div>
 
     {%- if titles_size > 0 -%}
     <nav class="header__nav">
-      <input class="header__nav-toggle" id="nav-toggle" type="checkbox" />
+      <input
+        class="header__nav-toggle"
+        id="nav-toggle"
+        type="checkbox"
+        aria-checked="false"
+        tabindex="0"
+        onclick="updateCheckedAria(event)"
+        onkeydown="updateCheckedAria(event)"
+      />
       <label for="nav-toggle" aria-label="show/hide the navigation menu">
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
+        <!-- unicode trigram -->
+        &#9776;
       </label>
 
       <ul class="header__links">
       {%- for path in page_paths -%}
-        {%- assign page = site.pages | where: "path", path | first -%}
-        {%- if page.title -%}
+        {%- assign header-link = site.pages | where: "path", path | first -%}
+        {%- if header-link.title -%}
         <li class="header__link">
-          <a href="{{ page.url | relative_url }}" aria-label="{{ page.title }}">{{ page.title | escape }}</a>
+          <a
+            href="{{ header-link.url | relative_url }}"
+            aria-label="{{ header-link.title }}"
+            {% if header-link.url == page.url %}
+            class="active"
+            {% endif %}
+            >
+            {{ header-link.title | escape }}
+          </a>
         </li>
         {%- endif -%}
       {%- endfor -%}
       </ul>
     </nav>
@@ -44,6 +61,16 @@
       header.classList.add('header--pinned')
     } else {
       header.classList.remove('header--pinned')
     }
   })
+
+  function updateCheckedAria(event) {
+    const spacebarKeyCode = 32
+    const checkbox = event.target
+
+    if (event.keyCode && event.keyCode !== spacebarKeyCode) {
+      return
+    }
+    checkbox.setAttribute('aria-checked', checkbox.checked)
+  }
 </script>