Download raw (6.3 KB)

<nav>
  <div class="svg-wrapper">
    <a href="{{ home_url }}">{{ svg_image('theme://images/logos/maju-bois-logo-optimized.svg', 'maju-bois-logo')|raw  }}</a>
  </div>

  <div class="nav-menu" data-visibility="hidden">
    <a class="nav-hamburger-button">&#10140;</a>
    <div class="nav-menu-filters">
      <div class="nav-selection language">
        {% for language in grav.language.getLanguages %}
          {% if language == grav.language.getActive %}
            <a href="/{{language}}" id="language-{{language}}" class="language-active">
              {{language}}
            </a>
          {% else %}
            <a href="/{{language}}" id="language-{{language}}">
              {{language}}
            </a>
          {% endif %}
        {% endfor %}
      </div>
      {% set lang = grav.language.getActive %}
      <div class="nav-selection about">
        <button href="#about" id="about-button" data-visibility="hidden" onclick="displayAbout()">
          {% if lang == 'fr' %}
            À propos
          {% elseif lang == 'en' %}
            About us
          {% else %}
            Over ons
          {% endif %}
        </button>
      </div>
      <ul class="nav-selection category">
        <li>
          <input id="all" type="checkbox" value="All" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="all">
            {% if lang == 'fr' %}
              Tout
            {% elseif lang == 'en' %}
              All
            {% else %}
              Alle
            {% endif %}
          </label>
        </li>
        <li>
          <input id="cuisine" type="checkbox" value="kitchen" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="cuisine">
            {% if lang == 'fr' %}
              Cuisines
            {% elseif lang == 'en' %}
              Kitchens
            {% else %}
              Keukens
            {% endif %}
          </label>
        </li>
        <li>
          <input id="salles-de-bain" value="bathroom" type="checkbox" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="salles-de-bain">
            {% if lang == 'fr' %}
              Salles de bain
            {% elseif lang == 'en' %}
              Bathrooms
            {% else %}
              Badkamers
            {% endif %}
          </label>
        </li>
        <li>
          <input id="bibliotheques" type="checkbox" value="library" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="bibliotheques">
            {% if lang == 'fr' %}
              Rangements
            {% elseif lang == 'en' %}
              Storages
            {% else %}
              Opbergmeubels
            {% endif %}
          </label>
        </li>
        <li>
          <input id="chambres" type="checkbox" value="bedroom" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="chambres">
            {% if lang == 'fr' %}
              Autres
            {% elseif lang == 'en' %}
              Other
            {% else %}
              Anders
            {% endif %}
          </label>
        </li>
        <li>
          <input id="ateliers" type="checkbox" value="workshop" checked onchange="toggleCheckboxes(event)"/>
          <label class="form-control" for="ateliers">
            {% if lang == 'fr' %}
              Ateliers
            {% elseif lang == 'en' %}
              Workshops
            {% else %}
              Werkplaats
            {% endif %}
          </label>
        </li>
      </ul>
      <div class="nav-selection year">
        {% set years = [] %}
        {% for module in page.collection() if module.template == 'modular/project' %}
          {% if module.header.year and module.header.year not in years %}
            {% set years = years|merge([module.header.year]) %}
          {% endif %}
        {% endfor %}
        <label for="years">
          {% if lang == 'fr' %}
            Années
          {% elseif lang == 'en' %}
            Years
          {% else %}
            Jaren
          {% endif %}
        </label>
        <select name="years" id="years" onchange="(filterYears())">
          <option value="All" selected>
            {% if lang == 'fr' %}
              Tout
            {% elseif lang == 'en' %}
              All
            {% else %}
              Alle
            {% endif %}
          </option>
          {% for year in years|sort|reverse %}
            <option value="{{ year }}">{{year}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="nav-icon-container">
        <div class="view-toggle-container">
          <svg version="1.1" id="list-view" class="nav-svg-icon view-toggle-button active" onclick="setListView()" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
            <line class="view-toggle-rect" x1='3.5' y1="3.5" x2="36.5" y2="3.5"/>
            <line class="view-toggle-rect" x1='3.5' y1="11.75" x2="36.5" y2="11.75"/>
            <line class="view-toggle-rect" x1='3.5' y1="20" x2="36.5" y2="20"/>
            <line class="view-toggle-rect" x1='3.5' y1="28.25" x2="36.5" y2="28.25"/>
            <line class="view-toggle-rect" x1='3.5' y1="36.5" x2="36.5" y2="36.5"/>
          </svg><svg version="1.1" id="grid-view" class="nav-svg-icon view-toggle-button" onclick="setGridView()" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
            <rect class="view-toggle-rect" width="14" height="14" x="3.5" y="3.5"/>
            <rect class="view-toggle-rect" width="14" height="14" x="22.5" y="3.5"/>
            <rect class="view-toggle-rect" width="14" height="14" x="3.5" y="22.5"/>
            <rect class="view-toggle-rect" width="14" height="14" x="22.5" y="22.5"/>
          </svg>
        </div>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/maju_bois/">
          <svg version="1.1" id="insta-btn" class="nav-svg-icon view-toggle-button"xmlns="http://www.w3.org/2000/svg" viewbox="0 0 40 40" xmlns:svg="http://www.w3.org/2000/svg">
            <rect class="view-toggle-rect" width="33" height="33" x="3.5" y="3.5"/>
            <circle class="view-toggle-rect" cx="20" cy="20" r="8"/>
            <circle class="view-toggle-rect" cx="30" cy="10" r="2"/>
          </svg>
        </a>
      </div>
    </div>
  </nav>