{% extends 'layouts/lab-side-content.html' %}

{% from 'macros/lab-example.html' import LabExample %}
{% from 'macros/lab-code.html' import LabCode %}

{% set pageType = "components" %}
{% set pageId = "nav" %}

{% block content %}
  <h1>Nav</h1>

  <h3>Usage</h3>

  {{LabExample(pageType, pageId)}}
  {{LabCode('html', '
  <ul class="c-nav">
    <li class="c-nav__item">
      <a class="c-nav__link is-active" href="...">...</a>
    </li>
    <li class="c-nav__item">
      <a class="c-nav__link" href="...">...</a>
    </li>
    <li class="c-nav__item">
      <a class="c-nav__link" href="...">...</a>
    </li>
    <li class="c-nav__item">
      <a class="c-nav__link is-disabled" href="...">...</a>
    </li>
    ...
  </ul>
  ')}}

  <h3>Vertical</h3>

  {{LabExample(pageType, pageId, 'vertical')}}
  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical">
    <li class="c-nav__item">
      <a class="c-nav__link" href="...">...</a>
    </li>
    ...
  </ul>
  ')}}

  <h3>Nested</h3>

  {{LabExample(pageType, pageId, 'nested')}}
  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical">
    <li class="c-nav__item">
      <a class="c-nav__link is-active" href="...">...</a>
      <ul class="c-nav c-nav--vertical c-nav--nested">
        <li class="c-nav__item">
          <a class="c-nav__link" href="...">...</a>
        </li>
        ...
      </ul>
    </li>
    ...
  </ul>
  ')}}

  <h3>Dropdown</h3>

  {{LabExample(pageType, pageId, 'dropdown')}}
  {{LabCode('html', '
  <ul class="c-nav c-nav--dropdown" data-module="Nav">
    <li class="c-nav__item is-dropdown-nav-parent">
      <a href="..." class="c-nav__link">...</a>
      <button class="c-button is-dropdown-button">
        <span class="o-icon o-icon--chevron-down">
          [icon]
        </span>
      </button>
      <ul class="c-nav is-dropdown-nav c-nav--vertical">
        <li class="c-nav__item ">
          <a href="..." class="c-nav__link">...</a>
        </li>
        ...
      </ul>
    </li>
    ...
  </ul>
  ')}}

  <h3>Accordion</h3>

  {{LabExample(pageType, pageId, 'accordion')}}
  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical c-nav--accordion" data-module="Nav">
    <li class="c-nav__item is-accordion-nav-parent">
      <a href="..." class="c-nav__link">...</a>
      <button class="c-button is-accordion-button">
        <span class="o-icon o-icon--chevron-down">
          [icon]
        </span>
      </button>
      <ul class="c-nav is-accordion-nav c-nav--vertical">
        <li class="c-nav__item ">
          <a href="..." class="c-nav__link">...</a>
        </li>
        ...
      </ul>
    </li>
    ...
  </ul>
  ')}}

  <h3>Responsive</h3>

  {{LabExample(pageType, pageId, 'responsive')}}
  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical c-nav--horizontal@md">
    <li class="c-nav__item">
      <a class="c-nav__link" href="...">...</a>
    </li>
    ...
  </ul>
  ')}}

  <h4>Responsive dropdown</h4>

  {{LabCode('html', '
  <ul class="c-nav c-nav--dropdown@md" data-module="Nav">
    ...
  </ul>
  ')}}

  <h4>Responsive accordion</h4>

  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical c-nav--accordion@md" data-module="Nav">
    ...
  </ul>
  ')}}

  <h4>Responsive dropdown &amp; accordion</h4>

  {{LabCode('html', '
  <ul class="c-nav c-nav--vertical c-nav--horizontal@lg c-nav--accordion@md c-nav--dropdown@lg" data-module="Nav">
    ...
  </ul>
  ')}}

{% endblock %}