[Docs] Collapse "Components" by default, except when viewing a page in /components/

docs/_includes/sidebar.njk

@@ -20,7 +20,8 @@
 </ul>
 
 {# Components #}
-<h2>
+<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>
@@ -47,6 +48,7 @@
   {% endif %}
   {% endfor %}
 </ul>
+</wa-details>
 
 {# Layout #}
 {% if not isAlpha %}

docs/assets/styles/docs.css

@@ -97,9 +97,26 @@ wa-page > header {
     font-size: var(--wa-font-size-m);
     margin: 0;
   }
-  h2:not(:first-child) {
+
+  h2:not(:first-child),
+  wa-details:not(:first-child) {
     margin-block-start: var(--wa-space-xs);
   }
+
+  wa-details {
+    border: none;
+    background: none;
+  }
+
+  wa-details::part(header) {
+    padding: 0;
+  }
+
+  wa-details::part(content) {
+    padding-inline: 0;
+    padding-block-end: 0;
+  }
+
   ul {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
     font-size: var(--wa-font-size-s);
@@ -107,21 +124,30 @@ wa-page > header {
     margin: 0;
     padding-inline-start: var(--wa-space-m);
   }
+
   ul ul {
     margin-block-start: var(--wa-space-m);
   }
+
+  ul:empty {
+    display: none;
+  }
+
   li {
     list-style: none;
+
+    + li {
+      margin-block-start: var(--wa-space-m);
+    }
   }
-  li + li {
-    margin-block-start: var(--wa-space-m);
-  }
+
   li a {
     color: var(--wa-color-text-normal);
     text-decoration: none;
-  }
-  li a:hover {
-    text-decoration: underline;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   li wa-badge::part(base) {