Menu

<!-- Default -->
<nav class="dso-navbar">
    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle">
            <span class="fas fa-bars" aria-hidden="true"></span>
            <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="#">
                Actueel
            </a>
        </li>
        <li>
            <a href="#">
                Kalender
            </a>
        </li>
        <li>
            <a href="#">
                Zelf aan de slag
            </a>
        </li>
        <li>
            <a href="#">
                Documenten
            </a>
        </li>
        <li>
            <a href="#">
                Over ons
            </a>
        </li>
        <li>
            <a href="#">
                Wetgeving
            </a>
        </li>
    </ul>

</nav>

<!-- Open -->
<nav class="dso-navbar">
    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle">
            <span class="fas fa-bars" aria-hidden="true"></span>
            <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="#">
                Actueel
            </a>
        </li>
        <li>
            <a href="#">
                Kalender
            </a>
        </li>
        <li>
            <a href="#">
                Zelf aan de slag
            </a>
        </li>
        <li>
            <a href="#">
                Documenten
            </a>
        </li>
        <li>
            <a href="#">
                Over ons
            </a>
        </li>
        <li>
            <a href="#">
                Wetgeving
            </a>
        </li>
    </ul>

</nav>

<nav class="dso-navbar{{#if open}} dso-open{{/if}}">
  <div class="dso-navbar-header">
    <button type="button" class="dso-navbar-toggle">
      {{> '@icon' icon='fas fa-bars' }}
      <span class="sr-only">Ga naar menu</span>
    </button>
  </div>
  {{render '@navs' modifier="main" }}
</nav>
/* Default */
__title: 'Example: open/close'
__explanation: Verklein de viewport en gebruik de checkbox om het responsive gedrag te zien
__switches:
  - name: state
    label: Open/sluit
menuItems:
  - label: Home
    active: true
  - label: Actueel
  - label: Kalender
  - label: Zelf aan de slag
  - label: Documenten
  - label: Over ons
    count: 12
  - label: Wetgeving
collapsed: true


/* Open */
__title: Menu open
__explanation: Verklein de viewport om het responsive menu open te zien
__switches: null
menuItems:
  - label: Home
    active: true
  - label: Actueel
  - label: Kalender
  - label: Zelf aan de slag
  - label: Documenten
  - label: Over ons
    count: 12
  - label: Wetgeving
collapsed: null


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