Use html details instead of javascript menus

bookwyrm/static/css/bookwyrm.css

@@ -115,6 +115,10 @@ input[type=file]::file-selector-button:hover {
     color: #363636;
 }
 
+details[open] .dropdown-menu {
+    display: block !important;
+}
+
 /** Shelving
  ******************************************************************************/
 

bookwyrm/templates/components/dropdown.html

@@ -2,25 +2,20 @@
 {% load utilities %}
 
 {% with 0|uuid as uuid %}
-<div
+<details
     id="menu_{{ uuid }}"
     class="
         dropdown control
         {% if right %}is-right{% endif %}
     "
 >
-    <button
-        class="button dropdown-trigger pulldown-menu {{ class }}"
-        type="button"
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-controls="menu_options_{{ uuid }}"
-        data-controls="menu_{{ uuid }}"
+    <summary
+        class="button control dropdown-trigger pulldown-menu {{ class }}"
     >
         {% block dropdown-trigger %}{% endblock %}
-    </button>
+    </summary>
 
-    <div class="dropdown-menu">
+    <div class="dropdown-menu control">
         <ul
             id="menu_options_{{ uuid }}"
             class="dropdown-content p-0 is-clipped"
@@ -29,6 +24,6 @@
             {% block dropdown-list %}{% endblock %}
         </ul>
     </div>
-</div>
+</details>
 {% endwith %}
 {% endspaceless %}