<nav>

  <ul class="o-bare-list c-accordion" role="tablist">

    <li>

      {% set acUUID = "#ac-#{random(9000)}" %}

      <input type="checkbox" class="c-accordion__trigger" id="{{ acUUID|trim('#')}}" {% if is_pattern != true %}checked{% endif %}>
      <label class="o-flag o-flag--center o-flag--rev c-accordion__header" aria-selected="" aria-controls="" aria-expanded="" role="tab" tabindex="" for="{{ acUUID|trim('#')}}">
        <span class="o-flag__image">
          <span class="c-accordion__icon"></span>
        </span>

        <span class="o-flag__body c-heading--h4 c-accordion__header-text">
          About
        </span>
      </label>

      <div class="c-accordion__content-wrapper">
        <div class="c-accordion__content">

          <ul class="o-block-list o-block-list--small">
            <li class="o-block-list__item">
              <a class="
                {% if current_page == "intro" %}c-text--loud{% endif %}" href="{{ link["docs-intro"] }}">Intro
              </a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "atomic-design" %}c-text--loud{% endif %}"
                href="{{ link["docs-atomic-design"] }}">Atomic Design</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "ux-process" %}c-text--loud{% endif %}"
                href="{{ link["docs-ux-process"] }}">UX Process</a>
            </li>
          </ul>


        </div>
      </div>

    </li>


    <li>

      {% set acUUID = "#ac-#{random(9000)}" %}

      <input type="checkbox" class="c-accordion__trigger" id="{{ acUUID|trim('#')}}" {% if is_pattern == true %}checked{% endif %}>
      <label class="o-flag o-flag--center o-flag--rev c-accordion__header" aria-selected="" aria-controls="" aria-expanded="" role="tab" tabindex="" for="{{ acUUID|trim('#')}}">
        <span class="o-flag__image">
          <span class="c-accordion__icon"></span>
        </span>

        <span class="o-flag__body c-heading--h4 c-accordion__header-text">
          Patterns
        </span>
      </label>

      <div class="c-accordion__content-wrapper">
        <div class="c-accordion__content">

          <ul class="o-block-list o-block-list--small">
            <li class="o-block-list__item">
              <a class="
                {% if current_page == "colors" %}c-text--loud{% endif %}"
                href="{{ link["docs-colors"] }}">Colors</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "typography" %}c-text--loud{% endif %}"
                href="{{ link["docs-typography"] }}">Typography</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "grid" %}c-text--loud{% endif %}"
                href="{{ link["docs-grid"] }}">Grid</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "icons" %}c-text--loud{% endif %}"
                href="{{ link["docs-icons"] }}">Icons</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "form-elements" %}c-text--loud{% endif %}"
                href="{{ link["docs-form-elements"] }}">Form Elements</a>
            </li>

            <li class="o-block-list__item">
              <a class="
                {% if current_page == "buttons-and-links" %}c-text--loud{% endif %}"
                href="{{ link["docs-buttons-and-links"] }}">Buttons and Links</a>
            </li>

            <!-- <li class="o-block-list__item">
              <a class="
                {% if current_page == "interface-feedback" %}c-text--loud{% endif %}"
                href="{{ link["interface-feedback"] }}">Interface Feedback</a>
            </li> -->
          </ul>


        </div>
      </div>

    </li>
  </ul>

</nav>
