{% macro nav_item(target_page_url, target_page_name, target_page_prefix) %}
<li class="nav__list-item">
  <a href="{{ target_page_url }}" class="nav__item{% if page_name.startsWith(target_page_prefix) %} nav--active{% endif %}">
    {{ _(target_page_name) }}
  </a>
</li>
{% endmacro %}

<nav class="nav slideout-menu" id="menu">
  <div class="row"><div class="columns clearfix">
    <ol class="nav__list nav__list--main clearfix">
      <li class="nav__list-item"><a href="/" class="nav__logo">&nbsp;</a></li>
      {% for item in Context.nav %}
        {% if item.perm %}
          {% if handler.hasPerm(item.perm) %}
            {{ nav_item(item.path, item.name, item.prefix) }}
          {% endif %}
        {% else %}
          {{ nav_item(item.path, item.name, item.prefix) }}
        {% endif %}
      {% endfor %}
    </ol>
    <ol class="nav__list nav__list--secondary clearfix">
    {% if not handler.hasPerm(perm.PERM_LOGGEDIN) %}
      <li class="nav__list-item"><a href="/login" class="nav__item" name="nav_login">{{ _('Login') }}</a></li>
      <li class="nav__list-item"><a href="/register" class="nav__item--round">{{ _('Sign Up') }}</a></li>
    {% else %}
      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-trigger-desktop-only>
        <a href="/user/{{ handler.user._id }}" class="nav__item">{{ handler.user.uname }} <span class="icon icon-expand_more nojs--hide"></span></a>
        <ol class="dropdown-target menu" id="menu-nav-user">
          <li class="menu__item">
            <a href="/user/{{ handler.user._id }}" class="menu__link">
              <span class="icon icon-account--circle"></span> {{ _('My Profile') }}
            </a>
          </li>
          <li class="menu__item">
            <a href="/home/messages" class="menu__link">
              <span class="icon icon-comment--multiple"></span> {{ _('home_messages') }}
            </a>
          </li>
          <li class="menu__seperator"></li>
          <li class="menu__item">
            <a href="/home/settings/account" class="menu__link">
              <span class="icon icon-wrench"></span> {{ _('home_account') }}
            </a>
          </li>
          <li class="menu__item">
            <a href="/home/settings/preference" class="menu__link">
              <span class="icon icon-sliders"></span> {{ _('home_preference') }}
            </a>
          </li>
          <li class="menu__item">
            <a href="/home/security" class="menu__link">
              <span class="icon icon-security"></span> {{ _('home_security') }}
            </a>
          </li>
          <li class="menu__seperator"></li>
          <li class="menu__item">
            <a href="/logout" class="menu__link" name="nav_logout">
              <span class="icon icon-logout"></span> {{ _('Logout') }}
            </a>
          </li>
        </ol>
      </li>
    {% endif %}
    </ol>
  </div></div>
</nav>
<nav class="nav--shadow"></nav>