_nav-mini.html

  <!-- main mini menu -->
  <div id="mini-menu" class="hidden absolute pin-t pin-x min-h-full bg-petrol p-4 mr-24 z-50" data-target="mini-menu.nav">
    <!-- back/close buttons -->
    <div class="mb-4" data-target="mini-menu.buttons">
      <a href="#" class="hidden no-underline text-petrol-light" data-action="click->mini-menu#navigate" data-target="mini-menu.backButton">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-6 w-6"><polygon points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"/></svg>
      </a>
    </div>

    <!-- menu wrapper -->
    <nav class="px-4">

      <!-- top level mini-menu -->
      <div id="top-menu" data-target="mini-menu.menu" class="text-2xl">
        {% for entry in navigation.level(1) %}
          {% if loop.first %}
            <ul class="list-reset">
              <li class="mb-6"><a href="{{ siteUrl }}" class="text-white hover:text-lime">Home</a></li>
          {% endif %}

          <li class="mb-6">
            <a href="#" class="text-white hover:text-lime flex items-center"
              data-action="click->mini-menu#navigate"
              data-previous="top-menu"
              data-next="{{entry.title|kebab ~ '-menu' }}">
              {{ entry.title }}
              {%- if (entry.hasDescendants or entry.type == 'contact' or 'directories') -%}
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-4 w-4 ml-1"><polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"/></svg>
              {%- endif -%}
            </a>
          </li>

          {% if loop.last %}</ul>{% endif %}
        {% endfor %}
      </div>

      <!-- SUB MENU V -->
      {% for entry in navigation.level(1) %}
      {% switch entry.type %}
      {% case 'contact' %}
      <div id="{{entry.title|kebab ~ '-menu' }}" data-target="mini-menu.menu" class="hidden flex-col">
        <h2 class="mb-2 text-2xl border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">{{ entry.title }}</h2>
        <a href="mailto:{{ companyInformation.email }}" class="text-lime hover:text-white text-lg mb-4 inline-block py-2">{{ companyInformation.email }}</a>

        <div class="text-white mb-4">
          {% include '_includes/social/follow' %}
        </div>

          {% if entry.relatedContent|length %}
            {% for entry in entry.relatedContent %}
            {% if loop.first %}<ul class="list-reset mb-8">{% endif %}
                <li class="text-white mb-2">
                  <a href="{{ entry.url }}" class="text-white hover:text-lime">{{ entry.title }}</a>
                </li>
            {% if loop.last %}</ul>{% endif %}
            {% endfor %}
          {% endif %}
        <div class="text-white text-sm leading-normal">
          {% if entry.body|length %}
          {{ entry.body }}
          {% endif %}

           <p class="text-xs">
          ‘{{ siteName }}’ is a trading division of Judd and Judd Ltd, a company registered in England and Wales, registered number 8082403. Registered office: Suite 2, Douglas House, 32-34 Simpson Road, Fenny Stratford, Buckinghamshire, MK1 1BA, United Kingdom.</p>
        </div>
     </div>

      {% case "directories" %}
      <div id="{{entry.title|kebab ~ '-menu' }}" data-target="mini-menu.menu" class="hidden flex-col">
        <h2 class="mb-2 text-2xl border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">{{ entry.title }}</h2>
        {% if entry.relatedContent|length %}
          {% for entry in entry.relatedContent %}
          {% if loop.first %}<ul class="list-reset w-full">{% endif %}
              <li class="text-white mb-2 {% if loop.last %}mt-6 pt-4 border-t border-petrol-light{% endif %}">
                <a href="{{ entry.url }}" class="text-white hover:text-lime py-2">{{ entry.title }}</a>
              </li>
          {% if loop.last %}</ul>{% endif %}
          {% endfor %}
        {% endif %}

       {% if entry.body|length %}
        <div class="text-white text-sm leading-normal pt-8">
          {{ entry.body }}
        </div>
        {% endif %}
       </div>

      {% default %}
      <div id="{{entry.title|kebab ~ '-menu' }}" data-target="mini-menu.menu" class="hidden flex-col">
        <h2 class="text-2xl mb-8 text-white font-semibold w-full">{{ entry.title }}</h2>
        <ul class="list-reset w-full">
        {% for entry in entry.getChildren() %}
          <h3 class="mb-2 text-lg border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">{{ entry.title }}</h3>
          <ul class="list-reset // mb-8 // ml-4">
            {% nav entry in entry.children %}
              <li class="mb-2">
              {%- switch entry.type.handle -%}
                {% case "externalLink" %}
                <a href="{{ entry.website }}" target="blank" class="text-sm text-white hover:text-lime py-2">{{ entry.title }}</a></li>
                {% case "page"  %}
                {%- if entry.singleEntry.first|length -%}
                <a href="{{ entry.singleEntry.first.url() }}" class="text-sm text-white hover:text-lime py-2">{{ entry.title }}</a></li>
                {%- endif -%}
                {% default %}
                {{ entry.title }}
              {%- endswitch -%}

                {% ifchildren %}
                <ul class="ml-4">
                  {% children %}
                </ul>
                {% endifchildren %}
              </li>
            {% endnav %}
          </ul>
          {% endfor %}
        </ul>
      </div>
      {% endswitch %}
      {% endfor %}

{#       <!-- services -> property development sub-menu -->
      <div id="property-development-menu" data-target="mini-menu.menu" class="w-2/3 hidden flex-col text-lg">
        <div class="text-3xl mb-8">Property Development</div>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Aerial Surveys & Inspection
        </a>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Building Information Modeling - Scan to BIM
        </a>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Construction Verification
        </a>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Measured Building Surveys
        </a>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Structural & Environmental Monitoring
        </a>
        <a href="#" class="no-underline text-grey-darker hover:text-grey mb-4">
          Underground Utilities Mapping & Topographical Surveys
        </a>
      </div> #}
    </nav>
  </div>