Make sidebar sections collapsable

Author: dutow

app/assets/stylesheets/components/sidebar.css

@@ -8,6 +8,27 @@
   margin-bottom: var(--spacing-8);
 }
 
+.sidebar-section summary.sidebar-heading {
+  list-style: none;
+  display: block;
+  cursor: pointer;
+}
+
+.sidebar-section summary.sidebar-heading::-webkit-details-marker {
+  display: none;
+}
+
+.sidebar-section summary.sidebar-heading::after {
+  content: "▾";
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  margin-left: var(--spacing-2);
+}
+
+.sidebar-section:not([open]) summary.sidebar-heading::after {
+  content: "▸";
+}
+
 .sidebar-content {
   padding: var(--spacing-3);
 }
@@ -36,4 +57,3 @@
     text-decoration: underline;
   }
 }
-

app/views/topics/show.html.slim

@@ -2,20 +2,21 @@
 
 - content_for :sidebar do
   .sidebar
-    .sidebar-section
-      h3.sidebar-heading Participants
-      - if @participants.present?
-        .participants-list
-          - max_participants = 12
-          - @participants.first(max_participants).each do |participant|
-            = render partial: "participant_row", locals: { participant: participant, avatar_size: 40 }
-          - if @participants.size > max_participants
-            .participant-more "+ #{(@participants.size - max_participants)} more"
-      - else
-        p No participants yet
+    details.sidebar-section open=true
+      summary.sidebar-heading Participants
+      .sidebar-section
+        - if @participants.present?
+          .participants-list
+            - max_participants = 12
+            - @participants.first(max_participants).each do |participant|
+              = render partial: "participant_row", locals: { participant: participant, avatar_size: 40 }
+            - if @participants.size > max_participants
+              .participant-more "+ #{(@participants.size - max_participants)} more"
+        - else
+          p No participants yet
 
-    .sidebar-section
-      h3.sidebar-heading Thread Outline
+    details.sidebar-section open=true
+      summary.sidebar-heading Thread Outline
       - if @thread_outline.present?
         .thread-outline
           - @thread_outline.chunk_while { |a, b| a[:branch_segment_index] == b[:branch_segment_index] }.each do |segment|