X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e731dd71a77ad4ad1e9db22535e89444bb98e5d9..e6b0e1ae7ef45b87a61f18bb50296273d6dd1bfb:/app/assets/javascripts/leaflet.sidebar.js?ds=inline

diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index f51aaa728..910da53f2 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -1,7 +1,7 @@
 L.OSM.sidebar = function (selector) {
-  var control = {},
-      sidebar = $(selector),
-      current = $(),
+  const control = {},
+        sidebar = $(selector);
+  let current = $(),
       currentButton = $(),
       map;
 
@@ -17,6 +17,10 @@ L.OSM.sidebar = function (selector) {
   };
 
   control.togglePane = function (pane, button) {
+    const mediumDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
+    const isMediumDevice = window.matchMedia(`(max-width: ${mediumDeviceWidth})`).matches;
+    const paneWidth = 250;
+
     current
       .hide()
       .trigger("hide");
@@ -26,11 +30,23 @@ L.OSM.sidebar = function (selector) {
 
     if (current === pane) {
       $(sidebar).hide();
+      $("#content").addClass("overlay-right-sidebar");
       current = currentButton = $();
+      if (isMediumDevice) {
+        map.panBy([0, -$("#map").height() / 2], { animate: false });
+      } else if ($("html").attr("dir") === "rtl") {
+        map.panBy([-paneWidth, 0], { animate: false });
+      }
     } else {
       $(sidebar).show();
+      $("#content").removeClass("overlay-right-sidebar");
       current = pane;
       currentButton = button || $();
+      if (isMediumDevice) {
+        map.panBy([0, $("#map").height()], { animate: false });
+      } else if ($("html").attr("dir") === "rtl") {
+        map.panBy([paneWidth, 0], { animate: false });
+      }
     }
 
     map.invalidateSize({ pan: false, animate: false });