Navigations

Openen van het hamburger menu gaat door .dso-open naast .dso-nav-bar te zetten

<!-- Default -->
<nav class="dso-navbar">

    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle">
            <svg class="di di-bars">
                <use href="../../dso-icons.svg#bars" />
            </svg>
            <span class="sr-only">Ga naar menu</span>
        </button>
    </div>

    <ul class="dso-nav dso-nav-main">
        <li class="dso-active">
            <a href="#">
                Home
            </a>
        </li>
        <li>
            <a href="#">
                Vergunningcheck
            </a>
        </li>
        <li>
            <a href="#">
                Aanvragen
            </a>
        </li>
        <li>
            <a href="#">
                Regels op de kaart
            </a>
        </li>
        <li>
            <a href="#">
                Mijn Omgevingsloket
            </a>
        </li>
    </ul>
</nav>

<!-- Secondary -->
<nav class="dso-navbar">

    <ul class="dso-nav dso-nav-sub">
        <li class="dso-active">
            <a href="#">
                Deze locatie
            </a>
        </li>
        <li>
            <a href="#">
                Regels
            </a>
        </li>
        <li>
            <a href="#">
                Overige informatie
            </a>
        </li>
    </ul>
</nav>

<nav {{ className('dso-navbar', [open, 'dso-open']) }}>
  {% if modifier === 'main' %}
    <div class="dso-navbar-header">
      <button type="button" class="dso-navbar-toggle">
        {% render '@icon', {icon: 'bars'} %}
        <span class="sr-only">Ga naar menu</span>
      </button>
    </div>
  {% endif %}
  <ul {{ className('dso-nav', 'dso-nav-' + modifier) }}>
    {%- for item in items %}
      <li {{ className([item.active, 'dso-active']) }}>
        <a href="#">
          {{ item.label }}
        </a>
      </li>
    {%- endfor -%}
  </ul>
</nav>

/* Default */
__title: Primary
__explanation: Verklein de viewport en gebruik de checkbox om het responsive gedrag te zien
__switches:
  - name: state
    label: Open/sluit
modifier: main
items:
  - label: Home
    active: true
  - label: Vergunningcheck
  - label: Aanvragen
  - label: Regels op de kaart
  - label: Mijn Omgevingsloket
collapsed: true

/* Secondary */
__title: Secondary
__explanation: null
__switches: null
modifier: sub
items:
  - label: Deze locatie
    active: true
  - label: Regels
  - label: Overige informatie
collapsed: true