collapsible track groups in sidebar! (ty Niklink)

2 files changed, 49 insertions, 18 deletions

diff --git a/src/static/site.css b/src/static/site.css
index ae41f88d..4728410a 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -339,6 +339,35 @@ footer > :last-child {
     overflow-wrap: break-word;
 }
 
+.sidebar > details.current summary {
+    font-weight: 800;
+}
+
+.sidebar > details summary {
+    margin-top: 0.5em;
+    padding-left: 5px;
+    user-select: none;
+}
+
+.sidebar > details summary:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.sidebar > details ul,
+.sidebar > details ol {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.sidebar > details:last-child {
+    margin-bottom: 10px;
+}
+
+.sidebar > details[open] {
+    margin-bottom: 1em;
+}
+
 .sidebar article {
     text-align: left;
     margin: 5px 5px 15px 5px;
diff --git a/src/upd8.js b/src/upd8.js
index a0465ee9..9aa5e76a 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -5762,31 +5762,33 @@ function generateSidebarForAlbum(album, currentTrack, {strings, to, wikiData}) {
 
     const trackListPart = fixWS`
         <h1><a href="${to('localized.album', album.directory)}">${album.name}</a></h1>
-        ${album.trackGroups ? fixWS`
-            <dl>
-                ${album.trackGroups.map(({ name, color, startIndex, tracks }) => fixWS`
-                    <dt ${classes(tracks.includes(currentTrack) && 'current')}>${
+        ${(album.trackGroups
+            ? album.trackGroups.map(({ name, color, startIndex, tracks }) =>
+                html.tag('details', {
+                    open: !currentTrack || tracks.includes(currentTrack),
+                    class: tracks.includes(currentTrack) && 'current'
+                }, [
+                    html.tag('summary',
                         (listTag === 'ol'
                             ? strings('albumSidebar.trackList.group.withRange', {
-                                group: strings.link.track(tracks[0], {to, text: name}),
+                                group: name,
                                 range: `${startIndex + 1}&ndash;${startIndex + tracks.length}`
                             })
                             : strings('albumSidebar.trackList.group', {
-                                group: strings.link.track(tracks[0], {to, text: name})
+                                group: name
                             }))
-                    }</dt>
-                    ${(!currentTrack || tracks.includes(currentTrack)) && fixWS`
-                        <dd><${listTag === 'ol' ? `ol start="${startIndex + 1}"` : listTag}>
+                    ),
+                    fixWS`
+                        <${listTag === 'ol' ? `ol start="${startIndex + 1}"` : listTag}>
                             ${tracks.map(trackToListItem).join('\n')}
-                        </${listTag}></dd>
-                    `}
-                `).join('\n')}
-            </dl>
-        ` : fixWS`
-            <${listTag}>
-                ${album.tracks.map(trackToListItem).join('\n')}
-            </${listTag}>
-        `}
+                        </${listTag}>
+                    `
+                ])).join('\n')
+            : fixWS`
+                <${listTag}>
+                    ${album.tracks.map(trackToListItem).join('\n')}
+                </${listTag}>
+            `)}
     `;
 
     const { groups } = album;