{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# Atoms #}
{% import "styleguides/general/atoms/main-action/main-action-macros.njk" as mainAction %}
{% import "styleguides/general/atoms/logo/logo-macros.njk" as logo %}
{% import "styleguides/general/atoms/menu-item/menu-item-macros.njk" as menuItem %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<nav class="o-menu {{classes}}">
  <div class="o-menu__container">
    <div class="o-menu__logo u-tablet-hide">
      {{logo.default("", {
        image: "/assets/general/img/logos/logo-nibc.png",
        name: "NIBC"
      })}}
    </div>

    <ul class="o-menu__list">
      <li class="o-menu__item">
        {{menuItem.default("is-active" if data.active == "overzicht", {
          icon: "icon-grid",
          activeIcon: "icon-grid-filled",
          text: "Overzicht"
        })}}
      </li>

      <li class="o-menu__item">
        {{menuItem.default("is-active" if data.active == "notificaties", {
          icon: "icon-bell",
          activeIcon: "icon-bell-filled",
          text: "Notificaties",
          badge: "5"
        })}}
      </li>

      <li class="o-menu__item o-menu__main-action">
        {{menuItem.default("is-active u-tablet-hide" if data.active == "overboeking" else "u-tablet-hide", {
          overlay: "overlay-overbooking-main",
          icon: "icon-transfer",
          activeIcon: "icon-transfer-filled",
          text: "Overboeking"
        })}}

        {{mainAction.default("u-tablet-show", {
          overlay: "overlay-overbooking-main",
          icon: "icon-transfer"
        })}}
      </li>

      <li class="o-menu__item">
        {{menuItem.default("is-active" if data.active == "instellingen", {
          icon: "icon-settings",
          activeIcon: "icon-settings-filled",
          text: "Instellingen"
        })}}
      </li>

      <li class="o-menu__item">
        {{menuItem.default("is-active" if data.active == "more", {
          icon: "icon-more",
          activeIcon: "icon-more-filled",
          text: "Meer"
        })}}
      </li>
    </ul>
  </div>
</nav>

{% endmacro %}