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.isAlpha) %}
    <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.isAlpha) %}
          <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 '/essentials/' in page.url }}>
  <h2 slot=summary>
    <a href="/docs/essentials/" title="Overview">Essentials
      <wa-icon name="grid-2"></wa-icon>
    </a>
  </h2>
  <ul>
    {% for page in collections.essentials | sort %}
    <li>
      <a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
    </li>
    {% endfor %}
  </ul>
</wa-details>

{# Layout #}
{% if not isAlpha %}
<h2>
  <a href="/docs/layout" title="Overview">Layout
    <wa-icon name="grid-2"></wa-icon>
  </a>
</h2>
<ul>
  <li><a href="/docs/components/page">Page</a></li>
  <li><a href="/docs/layout/cluster">Cluster</a></li>
  <li><a href="/docs/layout/flank">Flank</a></li>
  <li><a href="/docs/layout/frame">Frame</a></li>
  <li><a href="/docs/layout/grid">Grid</a></li>
  <li><a href="/docs/layout/split">Split</a></li>
  <li><a href="/docs/layout/stack">Stack</a></li>
</ul>
{% endif %}

{# 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>
  <li>
    <a href="/docs/theming/color">Color</a>
  </li>
  <li>
    <a href="/docs/theming/typography">Typography</a>
  </li>
  <li>
    <a href="/docs/theming/space">Space</a>
  </li>
  <li>
    <a href="/docs/theming/borders">Borders</a>
  </li>
  <li>
    <a href="/docs/theming/focus">Focus</a>
  </li>
  <li>
    <a href="/docs/theming/shadows">Shadows</a>
  </li>
  <li>
    <a href="/docs/theming/transitions">Transitions</a>
  </li>
  <li>
    <a href="/docs/theming/component-groups">Component Groups</a>
  </li>
</ul>

{# Style Utilities #}
{% if not isAlpha %}
<h2>Style Utilities</h2>
<ul>
  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
  <li><a href="/docs/style-utilities/gap">Gap</a></li>
  <li><a href="/docs/style-utilities/text">Text</a></li>
</ul>
{% endif %}