From e6edca07dd626e5efa889bfdad9e105ef4445f27 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 8 Mar 2025 18:06:24 +0300
Subject: [PATCH] Move close button out of left sidebar content

---
 app/assets/javascripts/index.js                | 2 +-
 app/assets/javascripts/index/directions.js     | 4 ++--
 app/assets/stylesheets/common.scss             | 1 +
 app/views/application/_sidebar_header.html.erb | 7 +------
 app/views/layouts/map.html.erb                 | 6 ++++++
 test/system/directions_test.rb                 | 4 +---
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index b79c33088..9220e1205 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -398,7 +398,7 @@ $(function () {
     }
   });
 
-  $(document).on("click", "#sidebar_content .btn-close", function () {
+  $(document).on("click", "#sidebar .sidebar-close-controls button", function () {
     OSM.router.route("/" + OSM.formatHash(map));
   });
 });
diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 89888bbd1..2d948d4b2 100644
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -294,7 +294,7 @@ OSM.Directions = function (map) {
   }
 
   function enableListeners() {
-    $("#sidebar_content").on("click", ".btn-close", hideRoute);
+    $("#sidebar .sidebar-close-controls button").on("click", hideRoute);
 
     $("#map").on("dragend dragover", function (e) {
       e.preventDefault();
@@ -350,7 +350,7 @@ OSM.Directions = function (map) {
     $(".search_form").show();
     $(".directions_form").hide();
 
-    $("#sidebar_content").off("click", ".btn-close", hideRoute);
+    $("#sidebar .sidebar-close-controls button").off("click", hideRoute);
     $("#map").off("dragend dragover drop");
     map.off("locationfound", sendstartinglocation);
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 27cfb465c..cbd6a94aa 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -351,6 +351,7 @@ body.small-nav {
       display: block;
     }
 
+    .sidebar-close-controls,
     #sidebar_loader,
     #sidebar_content {
       display: none;
diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb
index 9e7877f8a..d24a0c5fa 100644
--- a/app/views/application/_sidebar_header.html.erb
+++ b/app/views/application/_sidebar_header.html.erb
@@ -1,6 +1 @@
-<div class="d-flex">
-  <h2 class="flex-grow-1 text-break"><%= title %></h2>
-  <div>
-    <button type="button" class="btn-close" aria-label="<%= t("javascripts.close") %>"></button>
-  </div>
-</div>
+<h2 class="me-4 text-break"><%= title %></h2>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index ecaca3d2c..0f97c206e 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -18,6 +18,12 @@
 
     <div id="browse_status"></div>
 
+    <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 id="sidebar_loader" class="my-3 text-center loader" hidden>
       <div class="spinner-border" role="status">
         <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
diff --git a/test/system/directions_test.rb b/test/system/directions_test.rb
index 91a033c4d..a0ca87ce7 100644
--- a/test/system/directions_test.rb
+++ b/test/system/directions_test.rb
@@ -22,9 +22,7 @@ class DirectionsSystemTest < ApplicationSystemTestCase
       assert_content "Start popup text"
     end
 
-    within_sidebar do
-      find("button[aria-label='Close']").click
-    end
+    find("#sidebar .sidebar-close-controls button[aria-label='Close']").click
 
     within "#map" do
       assert_no_content "Start popup text"
-- 
2.39.5