Move close button out of right sidebar content

app/assets/javascripts/leaflet.sidebar-pane.js

@@ -20,14 +20,9 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
     const $ui = $("<div>")
       .attr("class", uiClass + "-ui");
 
-    $("<div class='d-flex p-3 pb-0'>")
-      .appendTo($ui)
-      .append($("<h2 class='flex-grow-1 text-break'>")
-        .text(I18n.t(paneTitle)))
-      .append($("<div>")
-        .append($("<button type='button' class='btn-close'>")
-          .attr("aria-label", I18n.t("javascripts.close"))
-          .bind("click", toggle)));
+    $("<h2 class='p-3 pb-0 pe-5 text-break'>")
+      .text(I18n.t(paneTitle))
+      .appendTo($ui);
 
     options.sidebar.addPane($ui);
 

app/assets/javascripts/leaflet.sidebar.js

@@ -59,5 +59,9 @@ L.OSM.sidebar = function (selector) {
       .addClass("active");
   };
 
+  sidebar.find(".sidebar-close-controls button").on("click", () => {
+    control.togglePane(current, currentButton);
+  });
+
   return control;
 };

app/views/layouts/map.html.erb

@@ -62,6 +62,11 @@
   </noscript>
 
   <div id="map-ui" class="bg-body z-2">
+    <div class="sidebar-close-controls">
+      <div class="position-absolute end-0 m-2">
+        <button type="button" class="btn-close d-block p-2" aria-label="<%= t("javascripts.close") %>"></button>
+      </div>
+    </div>
   </div>
 
   <div id="map" tabindex="2" class="bg-body-secondary z-0">

test/system/index_test.rb

@@ -16,7 +16,7 @@ class IndexTest < ApplicationSystemTestCase
     visit node_path(node)
     find(".icon.share").click
     assert_no_selector "#content.overlay-right-sidebar"
-    find(".share-ui .btn-close").click
+    find("#map-ui .btn-close").click
     assert_selector "#content.overlay-right-sidebar"
   end