Contents

{%- assign menu = site.posts | where: 'layout', 'about' | where: 'menu', true -%}

<nav class="navbar navbar-expand-lg d-print-block navbar-light" role="navigation" aria-label="{{ site.i18n.menu.title }}">
  <a class="navbar-brand" href="">
    <img src="{{ menu[0].logo.path | thumbnail: nil, 60 }}" alt="Logo"/>
  </a>

  {% comment %}
    TODO: Add CSS-only hamburger menu.
  {% endcomment %}
  <input
    type="checkbox"
    id="menu-toggler"
    aria-label="{{ site.i18n.menu.action }}"
    aria-labelledby="menu-label"
    class="toggler"/>
  <label
    for="menu-toggler"
    id="menu-label"
    class="w-lg-100 m-0 p-0 d-print-none"
    aria-controls="menu"
    aria-label="{{ site.i18n.menu.title }}">
    <div class="d-block d-lg-none">
      <div class="icon-open">
        {% include burger.svg %}
      </div>
      <div class="icon-close">
        {% include x.svg %}
      </div>
    </div>

    <ul class="toggled navbar-nav">
      {%- for item in menu -%}
        {% comment %}
          This makes it hard to just cache the whole navbar, but we prefer
          to mark the active item in code rather than with JS.
        {% endcomment %}

        <li class="nav-item">
          <a class="nav-link{% if page.url == item.url %} active{% endif %}" href="{{ item.url }}">
            {{ item.title }}

            {%- if page.url == item.url -%}
              <span class="sr-only">
                {{ site.i18n.menu.active | default: '(current)' }}
              </span>
            {%- endif -%}
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </label>
</nav>

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
recursero-jekyll-theme-0.1.3	_includes/navbar.html
recursero-jekyll-theme-0.1.2	_includes/navbar.html
recursero-jekyll-theme-0.1.1	_includes/navbar.html
recursero-jekyll-theme-0.1.0	_includes/navbar.html