X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/87422e56f96b6fd6c000663d809795d6695f2aa1..90e787eed845a850eab63a22831c9cfa47f4dd3d:/app/assets/javascripts/leaflet.sidebar.js

diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index 9573c839d..1c911a961 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -17,6 +17,8 @@ L.OSM.sidebar = function (selector) {
   };
 
   control.togglePane = function (pane, button) {
+    var mediumDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
+    var isMediumDevice = window.matchMedia(`(max-width: ${mediumDeviceWidth})`).matches;
     var paneWidth = 250;
 
     current
@@ -27,18 +29,22 @@ L.OSM.sidebar = function (selector) {
       .removeClass("active");
 
     if (current === pane) {
-      if ($("html").attr("dir") === "rtl") {
-        map.panBy([-paneWidth, 0], { animate: false });
-      }
       $(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 ($("html").attr("dir") === "rtl") {
+      if (isMediumDevice) {
+        map.panBy([0, $("#map").height()], { animate: false });
+      } else if ($("html").attr("dir") === "rtl") {
         map.panBy([paneWidth, 0], { animate: false });
       }
     }