nav.html

<!-- Desktop Nav -->

<nav class="xs-col-12 sm-col-3 lg-col-2 sm-fixed xs-t0 sm-b0 xs-l0 xs-overflow-auto sm-py3 sm-pb6 xs-border-bottom-lighter sm-border-bottom-none sm-border-right-lighter fill-white solid-nav">

  <h1 class="xs-relative xs-py3 sm-py0 sm-mb4 solid-header">
    <div class="sm-block solid-header--desktop-logo">
      <a href="/" class="solid-logo">Solid</a>
    </div>
    <div class="sm-hide solid-header--mobile">
      <span class="solid-logo">Solid</span>
      <div class="xs-absolute solid-header__caret"></div>
    </div>
  </h1>

  <div class="solid-nav__items sm-block">

    <ol class="list-unstyled xs-mb4">

      <li class="solid-nav__group {% if page.title == 'WTF is Solid?' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="/">WTF is Solid?</a>
      </li>
      <li class="solid-nav__group {% if page.title == 'Release Notes' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="release-notes.html">Release Notes</a>
      </li>
    </ol>


 <label class="xs-block xs-text-6 bold caps xs-mt4 sm-mt0 xs-mb1 sm-mb2 solid-nav__header">Resources</label>

    <ol class="list-unstyled xs-mb4">
      <li class="solid-nav__group {% if page.title == 'SASS Variables' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="variables.html">SASS Variables</a>
           {% if page.title == 'SASS Variables' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#typography" class="xs-block xs-px3 solid-nav__subitem">Typography</a></li>
            <li class="xs-py1"><a href="#colors" class="xs-block xs-px3 solid-nav__subitem">Colors</a></li>
            <li class="xs-py1"><a href="#layout" class="xs-block xs-px3 solid-nav__subitem">Layout</a></li>
            <li class="xs-py1"><a href="#borders" class="xs-block xs-px3 solid-nav__subitem">Borders</a></li>
            <li class="xs-py1"><a href="#disabled-opacity" class="xs-block xs-px3 solid-nav__subitem">Disabled Opacity</a></li>
          </ul>
        {% endif %}
      </li>
      <li class="solid-nav__group {% if page.title == 'SASS Mixins' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="mixins.html">SASS Mixins</a>
           {% if page.title == 'SASS Mixins' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#solid-breakpoint" class="xs-block xs-px3 solid-nav__subitem">Solid Breakpoint</a></li>
            <li class="xs-py1"><a href="#generate-prefixes" class="xs-block xs-px3 solid-nav__subitem">Generate Prefixes</a></li>
            <li class="xs-py1"><a href="#custom-buttons" class="xs-block xs-px3 solid-nav__subitem">Custom Buttons</a></li>
          </ul>
        {% endif %}
      </li>
      <li class="solid-nav__group {% if page.title == 'Sketch Template' %}active{% endif %}">
              <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="sketch-template.html">Sketch Template</a>
      </li>
      <li class="solid-nav__group {% if page.title == 'FAQ' %}active{% endif %}">
              <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="faq.html">FAQ</a>
      </li>
    </ol>


    <label class="xs-block xs-text-6 bold caps xs-mt4 sm-mt0 xs-mb1 sm-mb2 solid-nav__header">CSS Library</label>

    <ol class="list-unstyled xs-mb4">

      <li class="solid-nav__group {% if page.title == 'Typography' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="typography.html">Typography</a>

        {% if page.title == 'Typography' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#fonts" class="xs-block xs-px3 solid-nav__subitem">Fonts</a></li>
            <li class="xs-py1"><a href="#headers" class="xs-block xs-px3 solid-nav__subitem">Headers and Sizes</a></li>
            <li class="xs-py1"><a href="#slab" class="xs-block xs-px3 solid-nav__subitem">Slab Headers</a></li>
            <li class="xs-py1"><a href="#emphasis" class="xs-block xs-px3 solid-nav__subitem">Emphasis</a></li>
            <li class="xs-py1"><a href="#overflow" class="xs-block xs-px3 solid-nav__subitem">Overflow</a></li>
            <li class="xs-py1"><a href="#alignment" class="xs-block xs-px3 solid-nav__subitem">Alignment</a></li>
            <li class="xs-py1"><a href="#lists" class="xs-block xs-px3 solid-nav__subitem">Lists</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Colors' %}active{% endif %}" >

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="/colors.html">Colors</a>

        {% if page.title == 'Colors' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#fill-colors" class="xs-block xs-px3 solid-nav__subitem">Fill Colors</a></li>
            <li class="xs-py1"><a href="#social-fill-colors" class="xs-block xs-px3 solid-nav__subitem">Social Fill Colors</a></li>
            <li class="xs-py1"><a href="#text-colors" class="xs-block xs-px3 solid-nav__subitem">Text Colors</a></li>
            <li class='xs-py1'><a href="#link-colors" class="xs-block xs-px3 solid-nav__subitem">Link Colors</a></li>
            <li class='xs-py1'><a href="#social-link-colors" class="xs-block xs-px3 solid-nav__subitem">Social Link Colors</a></li>
            <li class='xs-py1'><a href="#svg-fill-colors" class="xs-block xs-px3 solid-nav__subitem">SVG Fill Colors</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Buttons' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="buttons.html">Buttons</a>

        {% if page.title == 'Buttons' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#buttons" class="xs-block xs-px3 solid-nav__subitem">Buttons</a></li>
            <li class="xs-py1"><a href="#secondary-buttons" class="xs-block xs-px3 solid-nav__subitem">Secondary Buttons</a></li>
            <li class='xs-py1'><a href="#transparent-buttons" class="xs-block xs-px3 solid-nav__subitem">Transparent Buttons</a></li>
            <li class="xs-py1"><a href="#negative-buttons" class="xs-block xs-px3 solid-nav__subitem">Negative Buttons</a></li>
            <li class="xs-py1"><a href="#white-buttons" class="xs-block xs-px3 solid-nav__subitem">White Buttons</a></li>
            <li class='xs-py1'><a href="#disabled-buttons" class="xs-block xs-px3 solid-nav__subitem">Disabled Buttons</a></li>
            <li class='xs-py1'><a href="#button-icon" class="xs-block xs-px3 solid-nav__subitem">Buttons with Icons</a></li>
            <li class='xs-py1'><a href="#social-buttons" class="xs-block xs-px3 solid-nav__subitem">Social Buttons</a></li>
            <li class='xs-py1'><a href="#small-buttons" class="xs-block xs-px3 solid-nav__subitem">Small Buttons</a></li>
            <li class='xs-py1'><a href="#small-button-icon" class="xs-block xs-px3 solid-nav__subitem">Small Buttons with Icon</a></li>
            <li class='xs-py1'><a href="#small-social-buttons" class="xs-block xs-px3 solid-nav__subitem">Small Social Buttons</a></li>
            <li class='xs-py1'><a href="#custom-buttons" class="xs-block xs-px3 solid-nav__subitem">Custom Buttons</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Forms' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="forms.html">Forms</a>

        {% if page.title == 'Forms' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#form-labels" class="xs-block xs-px3 solid-nav__subitem">Form Labels</a></li>
            <li class="xs-py1"><a href="#text-inputs" class="xs-block xs-px3 solid-nav__subitem">Text Inputs</a></li>
            <li class="xs-py1"><a href="#helper-text" class="xs-block xs-px3 solid-nav__subitem">Helper Text</a></li>
            <li class='xs-py1'><a href="#textareas" class="xs-block xs-px3 solid-nav__subitem">Textareas</a></li>
            <li class='xs-py1'><a href="#select-fields" class="xs-block xs-px3 solid-nav__subitem">Select Fields</a></li>
            <li class='xs-py1'><a href="#radio-buttons" class="xs-block xs-px3 solid-nav__subitem">Radio Buttons</a></li>
            <li class='xs-py1'><a href="#checkboxes" class="xs-block xs-px3 solid-nav__subitem">Checkboxes</a></li>
            <li class='xs-py1'><a href="#small-form-labels" class="xs-block xs-px3 solid-nav__subitem">Small Form Labels</a></li>
            <li class='xs-py1'><a href="#small-text-inputs" class="xs-block xs-px3 solid-nav__subitem">Small Text Inputs</a></li>
            <li class='xs-py1'><a href="#small-textareas" class="xs-block xs-px3 solid-nav__subitem">Small Textareas</a></li>
            <li class='xs-py1'><a href="#small-select-fields" class="xs-block xs-px3 solid-nav__subitem">Small Select Fields</a></li>
            <li class='xs-py1'><a href="#form-warnings" class="xs-block xs-px3 solid-nav__subitem">Form Warnings</a></li>
            <li class='xs-py1'><a href="#form-errors" class="xs-block xs-px3 solid-nav__subitem">Form Errors</a></li>
            <li class='xs-py1'><a href="#form-success" class="xs-block xs-px3 solid-nav__subitem">Form Success</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'SVG Icons' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="svg-icons.html">SVG Icons</a>

        {% if page.title == 'SVG Icons' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#icon-set" class="xs-block xs-px3 solid-nav__subitem">Icon Set</a></li>
            <li class="xs-py1"><a href="#sizing" class="xs-block xs-px3 solid-nav__subitem">Sizing</a>
            </li>
            <li class="xs-py1"><a href="#fill-color" class="xs-block xs-px3 solid-nav__subitem">Fill Color</a></li>
            <li class="xs-py1"><a href="#accessibility" class="xs-block xs-px3 solid-nav__subitem">Accessibility</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Tables' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="tables.html">Tables</a>

        {% if page.title == 'Tables' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#default-table" class="xs-block xs-px3 solid-nav__subitem">Default Table</a></li>
            <li class="xs-py1"><a href="#bordered-table" class="xs-block xs-px3 solid-nav__subitem">Bordered Table</a></li>
            <li class="xs-py1"><a href="#faux-table-layout" class="xs-block xs-px3 solid-nav__subitem">Faux Table Layout</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Responsive' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="responsive.html">Responsive</a>

        {% if page.title == 'Responsive' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#responsive-prefixes" class="xs-block xs-px3 solid-nav__subitem">Responsive Prefixes</a></li>
            <li class="xs-py1"><a href="#how-it-works" class="xs-block xs-px3 solid-nav__subitem">How It Works</a></li>
            <li class="xs-py1"><a href="#what-has-a-responsive-prefix" class="xs-block xs-px3 solid-nav__subitem">What Has a Responsive Prefix</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Layout' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="layout.html">Layout</a>

        {% if page.title == 'Layout' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#floats" class="xs-block xs-px3 solid-nav__subitem">Floats</a></li>
            <li class="xs-py1"><a href="#display" class="xs-block xs-px3 solid-nav__subitem">Display</a></li>
            <li class="xs-py1"><a href="#overflow" class="xs-block xs-px3 solid-nav__subitem">Overflow</a></li>
            <li class="xs-py1"><a href="#width-and-height" class="xs-block xs-px3 solid-nav__subitem">Width and Height</a></li>
            <li class="xs-py1"><a href="#spatial-units" class="xs-block xs-px3 solid-nav__subitem">Spatial Units</a></li>
            <li class="xs-py1"><a href="#spacing" class="xs-block xs-px3 solid-nav__subitem">Spacing</a></li>
            <li class="xs-py1"><a href="#positioning" class="xs-block xs-px3 solid-nav__subitem">Positioning</a></li>
            <li class="xs-py1"><a href="#vertical-alignment" class="xs-block xs-px3 solid-nav__subitem">Vertical Alignment</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Borders' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="borders.html">Borders</a>

        {% if page.title == 'Borders' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#borders" class="xs-block xs-px3 solid-nav__subitem">Borders</a></li>
            <li class="xs-py1"><a href="#lighter-borders" class="xs-block xs-px3 solid-nav__subitem">Lighter Borders</a></li>
            <li class="xs-py1"><a href="#removing-borders" class="xs-block xs-px3 solid-nav__subitem">Removing Borders</a></li>
            <li class="xs-py1"><a href="#rounded-corners" class="xs-block xs-px3 solid-nav__subitem">Rounded Corners</a></li>
            <li class="xs-py1"><a href="#circles" class="xs-block xs-px3 solid-nav__subitem">Circles</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Grid' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="grid.html">Grid</a>

        {% if page.title == 'Grid' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#the-grid" class="xs-block xs-px3 solid-nav__subitem">The Grid</a></li>
            <li class="xs-py1"><a href="#columns-are-for-layout" class="xs-block xs-px3 solid-nav__subitem">Columns Are for Layout</a></li>
            <li class="xs-py1"><a href="#nesting-columns" class="xs-block xs-px3 solid-nav__subitem">Nesting Columns</a></li>
            <li class="xs-py1"><a href="#gutters-automatic" class="xs-block xs-px3 solid-nav__subitem">Gutters (automatic)</a></li>
            <li class="xs-py1"><a href="#gutters-manual" class="xs-block xs-px3 solid-nav__subitem">Gutters (manual)</a></li>
            <li class="xs-py1"><a href="#column-offsets" class="xs-block xs-px3 solid-nav__subitem">Column Offsets</a></li>
            <li class="xs-py1"><a href="#responsive-grid" class="xs-block xs-px3 solid-nav__subitem">Responsive Grid</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Flexbox' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="flexbox.html">Flexbox</a>

        {% if page.title == 'Flexbox' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#justify-content" class="xs-block xs-px3 solid-nav__subitem">Justify Content</a></li>
            <li class="xs-py1"><a href="#align-items" class="xs-block xs-px3 solid-nav__subitem">Align Items</a></li>
            <li class="xs-py1"><a href="#grow-shrink" class="xs-block xs-px3 solid-nav__subitem">Grow and Shrink</a></li>
            <li class="xs-py1"><a href="#order" class="xs-block xs-px3 solid-nav__subitem">Order Properties</a></li>
            <li class="xs-py1"><a href="#direction" class="xs-block xs-px3 solid-nav__subitem">Direction</a></li>
          </ul>
        {% endif %}

      </li>

      <li class="solid-nav__group {% if page.title == 'Block Grid' %}active{% endif %}">

        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="block-grid.html">Block Grid</a>

        {% if page.title == 'Block Grid' %}
          <ul class="list-unstyled xs-text-5 xs-hide sm-block">
            <li class="xs-py1"><a href="#basic-block-grid" class="xs-block xs-px3 solid-nav__subitem">Basic Block Grid</a></li>
            <li class="xs-py1"><a href="#responsive-block-grid" class="xs-block xs-px3 solid-nav__subitem">Responsive Block Grid</a></li>
            <li class="xs-py1"><a href="#block-grid-without-gutters" class="xs-block xs-px3 solid-nav__subitem">Block Grid Without Gutters</a></li>
          </ul>
        {% endif %}

      </li>

    </ol>

    <label class="xs-block xs-text-6 caps bold xs-mb1 sm-mb2 solid-nav__header">Components</label>

    <ol class="list-unstyled xs-pb3 sm-pb0">

      <li class="solid-nav__group {% if page.title == 'Button Groups' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="button-groups.html">Button Groups</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Cards' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="cards.html">Cards</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Messaging' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="messaging.html">Messaging</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Modals' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="modals.html">Modals</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Pagination' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="pagination.html">Pagination</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Tags' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="tags.html">Tags</a>
      </li>

      <li class="solid-nav__group {% if page.title == 'Popovers' %}active{% endif %}">
        <a class="xs-block xs-px2 xs-py2 sm-py1 bold solid-nav__item" href="popovers.html">Popovers</a>
      </li>

    </ol>

  </div>

</nav>