Add details tag

main.css

@@ -6,6 +6,10 @@
     align-items: center;
     display:flex;
 }
+
+summary {
+    display:flex;
+}
 img.avatar {
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;

spaces.html

@@ -13,6 +13,10 @@
         <%def name="render(room)">
 
             <div class="room">
+                % if room['name'] != "TOP":
+                    % if room['name'] != "TOP" and room['name'] != "Libre Gaming":
+                    <details><summary>
+                    % endif
                <div class="info">
                     % if 'avatar_url' in room:
                     <img class="avatar roomAvatar" src=${mxc2url(room['avatar_url'])}>
@@ -31,13 +35,18 @@
                             </a>
                     % endif
                 </div>
+                    % if room['name'] != "TOP" and room['name'] != "Libre Gaming":
+                    </summary>
+                    % endif
+                % endif
 
                 % if 'children' in room:
-                    <details>
                     % for subroom in room['children']:
                         ${render(subroom)}
                     % endfor
+                    % if room['name'] != "TOP" and room['name'] != "Libre Gaming":
                     </details>
+                    % endif
                 % endif
             </div>