webawesome/docs/_includes/sidebar.njk

{# Getting started #}
<h2>Getting Started</h2>
<ul>
  <li><a href="/docs/installation">Installation</a></li>
  <li><a href="/docs/usage">Usage</a></li>
  <li><a href="/docs/themes">Themes</a></li>
  <li><a href="/docs/customizing">Customizing</a></li>
  <li><a href="/docs/form-controls">Form Controls</a></li>
  <li><a href="/docs/localization">Localization</a></li>
</ul>

{# Resources #}
<h2>Resources</h2>
<ul>
  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
  <li><a href="/docs/resources/community">Community</a></li>
  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
  <li><a href="/docs/resources/contributing">Contributing</a></li>
  <li><a href="/docs/resources/changelog">Changelog</a></li>
</ul>

{# Components #}
<wa-details {{ 'open' if '/components/' in page.url }}>
  <h2 slot=summary>
    <a href="/docs/components/" title="Overview">Components
      <wa-icon name="grid-2"></wa-icon>
    </a>
  </h2>

  <ul>
    {% for component in collections.component | sort %}
    {% if not component.data.parent and not (isAlpha and component.data.noAlpha) %}
    <li>
      <a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>

      {% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
      {% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
      <ul>
      {% for child in collections.component | sort %}
        {% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
          <li>
            <a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
      </ul>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</wa-details>

<wa-details {{ 'open' if '/native/' in page.url }}>
  <h2 slot=summary>
    <a href="/docs/native/" title="Overview">Native Styles
      <wa-icon name="grid-2"></wa-icon>
    </a>
  </h2>
  <ul>
    {% for page in collections.native | sort %}
    {% if page.fileSlug != 'native' and not page.unlisted %}
    <li>
      <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</wa-details>

<wa-details {{ 'open' if '/utilities/' in page.url }}>
  <h2 slot=summary>
    <a href="/docs/utilities/" title="Overview">Style Utilities
      <wa-icon name="grid-2"></wa-icon>
    </a>
  </h2>
  <ul>
    {% for page in collections.utilities | sort %}
    {% if page.fileSlug != 'utilities' and not page.unlisted %}
    <li>
      <a href="/docs/utilities/{{ page.fileSlug }}">{{ page.data.title }}</a>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</wa-details>

{# Layout #}
<h2>
  <a href="/docs/layout" title="Overview">Layout
    <wa-icon name="grid-2"></wa-icon>
  </a>
</h2>
<ul>
  {% for page in collections.layout | sort %}
    {% if page.fileSlug != 'layout' and not page.unlisted %}
    <li>
      <a href="{{ page.url }}">{{ page.data.title }}</a>
    </li>
    {% endif %}
  {% endfor %}
</ul>

{# Patterns #}
{% if not isAlpha %}
<h2>Patterns</h2>
<ul>
  <li><a href="/docs/patterns/app">Web App</a></li>
  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
    <ul>
      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
      <li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
    </ul>
  </li>
  <li><a href="/docs/patterns/blog">Blog</a></li>
  <li><a href="/docs/patterns/news">News</a></li>
</ul>
{% endif %}

{# Theming #}
<h2>
  <a href="/docs/theming" title="Overview">Theming
    <wa-icon name="grid-2"></wa-icon>
  </a>
</h2>
<ul>
{% for page in collections.theming | sort %}
  {% if page.fileSlug != 'theming' and not page.unlisted %}
    <li>
      <a href="/docs/theming/{{ page.fileSlug }}">{{ page.data.title }}</a>
    </li>
  {% endif %}
{% endfor %}
</ul>