<a id="skip-to-navigation"></a>
<nav class="main-nav" id="main-nav">

  {{#if isLoggedIn}}
    <div class="nav-button-wrap" data-logged-in="true">
      {{#if tradepro-nav}}
        {{#each header_menu.tradepro}}
          {{#if (eq type "userActions")}}
            {{> header-menu/user-actions-mob items=items}}
          {{/if}}
          {{#if (eq type "popoverActions")}}
            {{> header-menu/popover-actions-mob items=items}}
          {{/if}}
        {{/each}}
      {{else if installer-nav}}
        {{#each header_menu.installer}}
          {{#if (eq type "userActions")}}
            {{> header-menu/user-actions-mob items=items}}
          {{/if}}
          {{#if (eq type "popoverActions")}}
            {{> header-menu/popover-actions-mob items=items}}
          {{/if}}
        {{/each}}
      {{else}}
        {{#each header_menu.diy}}
          {{#if (eq type "userActions")}}
            {{> header-menu/user-actions-mob items=items}}
          {{/if}}
          {{#if (eq type "popoverActions")}}
            {{> header-menu/popover-actions-mob items=items}}
          {{/if}}
        {{/each}}
      {{/if}}

      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Log Out</span>
        </a>
      </div>
    </div>
  {{else}}
    <div class="main-nav__button main-nav__button--not-logged-in" data-logged-in="false">
      <a href="/login.html" class="nav-button">
        <span class="nav-button__icon">
            <i class="fas fa-user"></i>
        </span>
        <span class="nav-button__text">Log In / Register</span>
      </a>
    </div>
  {{/if}}

  <div class="main-nav__button">
    <a href="/login.html" class="nav-button">
      <span class="nav-button__icon">
          <i class="fas fa-map-marked-alt"></i>
      </span>
      <span class="nav-button__text">Track Order</span>
    </a>
  </div>
  <div class="main-nav__button">
    <a href="/login.html" class="nav-button">
      <span class="nav-button__icon">
          <i class="fas fa-lightbulb"></i>
      </span>
      <span class="nav-button__text">Ideas & Advice</span>
    </a>
  </div>
  <div class="main-nav__button">
    <a href="./page_my-shopping-list.html" class="nav-button">
      <span class="nav-button__icon">
        <i class="fas {{#if shopListEmpty}}fa-clipboard{{else}}fa-clipboard-list{{/if}}"></i>
      </span>
      <span class="nav-button__text">
        {{#if isLoggedIn}}
          Project Lists
        {{else}}
          Project List
        {{/if}}
      </span>
    </a>
  </div>
</nav>
<div class="main-nav__overlay"></div>
