Add a collapse function to the sidebar (#63)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

2 files changed, 35 insertions, 4 deletions

diff --git a/.changeset/loud-books-wash.md b/.changeset/loud-books-wash.md
new file mode 100644
index 00000000..f3ba894f
--- /dev/null
+++ b/.changeset/loud-books-wash.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Make sidebar groups to collapsible
diff --git a/packages/starlight/components/SidebarSublist.astro b/packages/starlight/components/SidebarSublist.astro
index 344df808..762ee446 100644
--- a/packages/starlight/components/SidebarSublist.astro
+++ b/packages/starlight/components/SidebarSublist.astro
@@ -1,5 +1,6 @@
 ---
 import type { SidebarEntry } from '../utils/navigation';
+import Icon from './Icon.astro';
 
 interface Props {
   sublist: SidebarEntry[];
@@ -15,10 +16,13 @@ interface Props {
             {entry.label}
           </a>
         ) : (
-          <>
-            <h2>{entry.label}</h2>
+          <details open>
+            <summary>
+              <h2>{entry.label}</h2>
+              <Icon name="right-caret" class="caret" size="1.25rem" />
+            </summary>
             <Astro.self sublist={entry.entries} />
-          </>
+          </details>
         )}
       </li>
     ))
@@ -36,13 +40,35 @@ interface Props {
     font-size: var(--sl-text-lg);
     font-weight: 600;
     color: var(--sl-color-white);
-    padding-inline: var(--sl-sidebar-item-padding-inline);
   }
 
   .sidebar-group + .sidebar-group {
     margin-top: 0.75rem;
   }
 
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: var(--sl-sidebar-item-padding-inline);
+    cursor: pointer;
+    user-select: none;
+  }
+  summary::marker,
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .caret {
+    transition: transform 0.2s ease-in-out;
+  }
+  :global([dir='rtl']) .caret {
+    transform: rotateZ(180deg);
+  }
+  [open] .caret {
+    transform: rotateZ(90deg);
+  }
+
   a {
     display: block;
     border-radius: 0.25rem;