{{#
/**
 * @name secondary-nav
 * @todo Document property vars/partial
 */
#}}
{{ if old === true }}
  {{ section:secondary_nav }}
    <nav class="border-box fixed w-100 left-0 right-0 body-3 bg-white secondary-nav {{ if bg-color==='ocean' }}m--bg-ocean{{ else }}m--bg-transparent{{ /if }} m--px-5" data-state="collapsed" id="secondaryNav">
      <div class="mw-grid mx-auto m--flex m--jc-space-between m--ai-baseline secondary-nav-inner">
        <div class="flex flex-shrink-0 bb bw-1 bc-ocean-40 m--bs-none m--py-4 secondary-nav-topic">
          <a href="{{ topic_url }}" class="block py-4 px-5 fw-600 ocean link flex-grow-1 br bw-1 bc-ocean-40 m--white m--inline m--flex-grow-0 m--px-0 m--py-0 m--bs-none">{{ topic_label }}</a>
          <button class="button-reset secondary-nav-btn bs-none p-0 pointer bg-white" id="secondaryNavBtn"><i class="darr darr-large bc-ocean"></i></button>
        </div>
        <ul class="list m-0 p-0 fs-3 lh-6 fw-500 body fw-wrap secondary-nav-dropdown m--py-4">
          {{ secondary_nav_subtopics }}
          <li class="secondary-nav-item flex-shrink-0 m--ml-5 {{ if subtopic_url === current_uri }}secondary-nav-item-active{{ /if }}">
            <a href="{{ subtopic_url }}" class="link block py-4 px-5 m--py-0 m--px-0 td-none">
              <span class="pb-1">
                {{ subtopic_label }}
              </span>
            </a>
          </li>
          {{ /secondary_nav_subtopics }}
        </ul>
      </div>
    </nav>
  {{ /section:secondary_nav }}
{{ else }}
  <nav class="border-box fixed w-100 left-0 right-0 body-3 bg-white secondary-nav {{ if bg-color==='ocean' }}m--bg-ocean{{ else }}m--bg-transparent{{ /if }} m--px-5" data-state="collapsed" id="secondaryNav">
    <div class="mw-grid mx-auto m--flex m--jc-space-between m--ai-baseline secondary-nav-inner">
      <div class="flex flex-shrink-0 bb bw-1 bc-ocean-40 m--bs-none m--py-4 secondary-nav-topic">
        {{ if static_title }}
          <span class="block py-4 px-5 fw-600 ocean link flex-grow-1 br bw-1 bc-ocean-40 m--white m--inline m--flex-grow-0 m--px-0 m--py-0 m--bs-none">{{ static_title }}</span>
        {{ else }}
          {{ relate:page_item }}
              <a href="{{ url }}" class="block py-4 px-5 fw-600 ocean link flex-grow-1 br bw-1 bc-ocean-40 m--white m--inline m--flex-grow-0 m--px-0 m--py-0 m--bs-none">{{ title }}</a>
          {{ /relate:page_item }}
        {{ /if }}
        <button class="button-reset secondary-nav-btn bs-none p-0 pointer bg-white" id="secondaryNavBtn"><i class="darr darr-large bc-ocean"></i></button>
      </div>
      <ul class="list m-0 p-0 fs-3 lh-6 fw-500 body fw-wrap secondary-nav-dropdown m--py-4">
        {{ relate:subnav_items }}
          <li class="secondary-nav-item flex-shrink-0 m--ml-5 {{ if url === current_uri }}secondary-nav-item-active{{ /if }}">
            <a href="{{ url }}" class="link block py-4 px-5 m--py-0 m--px-0 td-none">
              <span class="pb-1">
                {{ title }}
              </span>
            </a>
          </li>
        {{ /relate:subnav_items }}
      </ul>
    </div>
  </nav>
{{ /if }}