From 23dc88467879e44e127b55cfb8bc7cf3173586b4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 23 May 2025 12:07:34 -0400 Subject: [PATCH] Simplify sidebar (#989) * remove test value * remove animation to prevent page-to-page blips * static sidebar * manage open sections on page load and with turbo * cleanup unused scripts * Remove overlap between Style Utilities and Layout --------- Co-authored-by: lindsaym-fa --- docs/_includes/base.njk | 1 + docs/_includes/sidebar-group.njk | 23 -- docs/_includes/sidebar-link.njk | 16 -- docs/_includes/sidebar.njk | 436 ++++++++++++++++++++++++++++++- docs/assets/scripts/sidebar.js | 26 ++ docs/assets/styles/docs.css | 5 + docs/docs/components/textarea.md | 2 +- 7 files changed, 457 insertions(+), 52 deletions(-) delete mode 100644 docs/_includes/sidebar-group.njk delete mode 100644 docs/_includes/sidebar-link.njk create mode 100644 docs/assets/scripts/sidebar.js diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 473f7897a..b826b1cf2 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -9,6 +9,7 @@ + {% if hasSidebar %}{% endif %} {% if hasSidebar %}{% endif %} diff --git a/docs/_includes/sidebar-group.njk b/docs/_includes/sidebar-group.njk deleted file mode 100644 index b723d22ab..000000000 --- a/docs/_includes/sidebar-group.njk +++ /dev/null @@ -1,23 +0,0 @@ -{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #} -{% if collections[tag] -%} - {% set groupUrl %}/docs/{{ tag }}/{% endset %} - {% set groupItem = groupUrl | getCollectionItemFromUrl %} - {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %} - - -

- {% if groupItem %} - {{ title or (tag | capitalize) }} - - - {% else %} - {{ title or (tag | capitalize) }} - {% endif %} -

-
    - {% for page in children %} - {% include 'sidebar-link.njk' %} - {% endfor %} -
- -{%- endif %} diff --git a/docs/_includes/sidebar-link.njk b/docs/_includes/sidebar-link.njk deleted file mode 100644 index fafaf399d..000000000 --- a/docs/_includes/sidebar-link.njk +++ /dev/null @@ -1,16 +0,0 @@ -{% if page and not page.data.unlisted -%} -
  • - {{ page.data.title }} - {% if page.data.status == 'experimental' %}{% endif %} - {% if page.data.isPro %}PRO{% endif %} - - {% set children = page.data.children %} - {% if children.length > 0 %} -
      - {% for page in children %} - {% include 'sidebar-link.njk' %} - {% endfor %} -
    - {% endif %} -
    • -{%- endif %} diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 71345ddf9..f96611dfc 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -20,15 +20,427 @@
  • Visual Tests
    • -{% for tag, title in { - 'themes': 'Themes', - 'components': 'Components', - 'native': 'Native Styles', - 'utilities': 'Style Utilities', - 'layout': 'Layout', - 'patterns': 'Patterns', - 'palettes': 'Color Palettes', - 'tokens': 'Design Tokens' -} %} - {% include 'sidebar-group.njk' %} -{% endfor %} + + +

    + + Themes + + +

    + +     + + + +

    + + Components + + +

    + +     + + + +

    + + Native Styles + + +

    + +     + + + +

    + + Style Utilities + + +

    + +     + + + +

    + + Layout + + +

    + +     + + + +

    + + Patterns + + +

    + +     + + + +

    + + Color Palettes + + +

    + +     + + + +

    + + Design Tokens + + +

    + +     diff --git a/docs/assets/scripts/sidebar.js b/docs/assets/scripts/sidebar.js new file mode 100644 index 000000000..2a077cee2 --- /dev/null +++ b/docs/assets/scripts/sidebar.js @@ -0,0 +1,26 @@ +const sidebar = document.querySelector('#sidebar'); +const allDetails = sidebar.querySelectorAll('wa-details'); +const collapsibleSections = sidebar.querySelectorAll('h2 > a'); + +function ensureCurrentSectionIsOpen(root) { + const matchingDetails = root.querySelectorAll('wa-details:has(a.current)'); + + matchingDetails.forEach(details => { + details.setAttribute('open', ''); + }); +} + +// Ensure current section is open on normal page load +window.addEventListener('DOMContentLoaded', () => { + ensureCurrentSectionIsOpen(sidebar); +}); + +// Ensure current section is open on Turbo page loads +document.addEventListener('turbo:before-render', event => { + if (!event?.detail?.newBody) return; + const newSidebar = event.detail.newBody.querySelector('#sidebar'); + + if (newSidebar) { + ensureCurrentSectionIsOpen(newSidebar); + } +}); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 9ba02ef69..856f2d4ec 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -198,6 +198,11 @@ wa-badge.pro { opacity: 0; } } + + wa-details { + --show-duration: 0; + --hide-duration: 0; + } } wa-icon-button.delete { diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 7af557eba..0cb1fcc37 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -8,7 +8,7 @@ native: input ```html {.example}
    - +