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 #}
<h2>
  <a href="/docs/components/" title="Overview">Components
    <wa-icon name="grid-2"></wa-icon>
  </a>
</h2>
<ul>
  <li>
    <a href="/docs/components/animated-image">Animated Image</a>
  </li>
  <li>
    <a href="/docs/components/animation">Animation</a>
  </li>
  <li>
    <a href="/docs/components/avatar">Avatar</a>
  </li>
  <li>
    <a href="/docs/components/badge">Badge</a>
  </li>
  <li>
    <a href="/docs/components/breadcrumb">Breadcrumb</a>
    <ul>
      <li>
        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/button">Button</a>
  </li>
  <li>
    <a href="/docs/components/button-group">Button Group</a>
  </li>
  <li>
    <a href="/docs/components/callout">Callout</a>
  </li>
  <li>
    <a href="/docs/components/card">Card</a>
  </li>
  <li>
    <a href="/docs/components/carousel">Carousel</a>
    <ul>
      <li>
        <a href="/docs/components/carousel-item">Carousel Item</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/checkbox">Checkbox</a>
  </li>
  {% if not isAlpha %}
  <li>
    <a href="/docs/components/code-demo">Code Demo</a>
  </li>
  {% endif %}
  <li>
    <a href="/docs/components/color-picker">Color Picker</a>
  </li>
  <li>
    <a href="/docs/components/copy-button">Copy Button</a>
  </li>
  <li>
    <a href="/docs/components/details">Details</a>
  </li>
  <li>
    <a href="/docs/components/dialog">Dialog</a>
  </li>
  <li>
    <a href="/docs/components/divider">Divider</a>
  </li>
  <li>
    <a href="/docs/components/drawer">Drawer</a>
  </li>
  <li>
    <a href="/docs/components/dropdown">Dropdown</a>
  </li>
  <li>
    <a href="/docs/components/format-bytes">Format Bytes</a>
  </li>
  <li>
    <a href="/docs/components/format-date">Format Date</a>
  </li>
  <li>
    <a href="/docs/components/format-number">Format Number</a>
  </li>
  <li>
    <a href="/docs/components/icon">Icon</a>
  </li>
  <li>
    <a href="/docs/components/icon-button">Icon Button</a>
  </li>
  <li>
    <a href="/docs/components/image-comparer">Image Comparer</a>
  </li>
  <li>
    <a href="/docs/components/include">Include</a>
  </li>
  <li>
    <a href="/docs/components/input">Input</a>
  </li>
  <li>
    <a href="/docs/components/menu">Menu</a>
    <ul>
      <li>
        <a href="/docs/components/menu-item">Menu Item</a>
      </li>
      <li>
        <a href="/docs/components/menu-label">Menu Label</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/mutation-observer">Mutation Observer</a>
  </li>
  <li>
    <a href="/docs/components/page">Page</a>
    <wa-icon name="flask"></wa-icon>
    <wa-badge class="pro">PRO</wa-badge>
  </li>
  <li>
    <a href="/docs/components/popup">Popup</a>
  </li>
  <li>
    <a href="/docs/components/progress-bar">Progress Bar</a>
  </li>
  <li>
    <a href="/docs/components/progress-ring">Progress Ring</a>
  </li>
  <li>
    <a href="/docs/components/qr-code">QR Code</a>
  </li>
  <li>
    <a href="/docs/components/radio-group">Radio Group</a>
    <ul>
      <li>
        <a href="/docs/components/radio">Radio</a>
      </li>
      <li>
        <a href="/docs/components/radio-button">Radio Button</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/range">Range</a>
  </li>
  <li>
    <a href="/docs/components/rating">Rating</a>
  </li>
  <li>
    <a href="/docs/components/relative-time">Relative Time</a>
  </li>
  <li>
    <a href="/docs/components/resize-observer">Resize Observer</a>
  </li>
  <li>
    <a href="/docs/components/select">Select</a>
    <ul>
      <li>
        <a href="/docs/components/option">Option</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/skeleton">Skeleton</a>
  </li>
  <li>
    <a href="/docs/components/spinner">Spinner</a>
  </li>
  <li>
    <a href="/docs/components/split-panel">Split Panel</a>
  </li>
  <li>
    <a href="/docs/components/switch">Switch</a>
  </li>
  <li>
    <a href="/docs/components/tab-group">Tab Group</a>
    <ul>
      <li>
        <a href="/docs/components/tab">Tab</a>
      </li>
      <li>
        <a href="/docs/components/tab-panel">Tab Panel</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/docs/components/tag">Tag</a>
  </li>
  <li>
    <a href="/docs/components/textarea">Textarea</a>
  </li>
  <li>
    <a href="/docs/components/tooltip">Tooltip</a>
  </li>
  <li>
    <a href="/docs/components/tree">Tree</a>
    <ul>
      <li>
        <a href="/docs/components/tree-item">Tree Item</a>
      </li>
    </ul>
  </li>
  {% if not isAlpha %}
  <li>
    <a href="/docs/components/viewport-demo">Viewport Demo</a>
  </li>
  {% endif %}
</ul>

{# 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 %}