Fix disappearing sidebar button on mobile

DigitalCommons · Apr 17, 2024 · 9ae02fb · 9ae02fb
1 parent f78c4b2
commit 9ae02fb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/src/map-app/app/view/sidebar.ts b/src/map-app/app/view/sidebar.ts
@@ -190,14 +190,8 @@ export class SidebarView extends BaseView {
     }
     //else show it
     const sidebar = d3.select("#map-app-sidebar");
-    const sidebarButton = d3.select("#map-app-sidebar-button");
     d3.select(".w3-btn").attr("title", this.presenter.mapui.labels.hideDirectory);
 
-    const initiativeListSidebar = d3.select("#sea-initiatives-list-sidebar");
-    if (!initiativeListSidebar.empty() && !sidebarButton.empty())
-      initiativeListSidebar.insert(() => sidebarButton.node(), // moves sidebarButton
-                                   "#sea-initiatives-list-sidebar-content");
-
     sidebar
       .on(
         "transitionend",
@@ -215,9 +209,7 @@ export class SidebarView extends BaseView {
 
   hideInitiativeList() {
     const sidebar = d3.select("#map-app-sidebar");
-    const sidebarButton = d3.select("#map-app-sidebar-button");
-    sidebar.insert(() => sidebarButton.node(), // moves sidebarButton
-                   "#sea-initiatives-list-sidebar");
+
     sidebar.on(
       "transitionend",
       (event: TransitionEvent) => {

diff --git a/src/map-app/styles/style.css b/src/map-app/styles/style.css
@@ -491,6 +491,10 @@ div.map-app-map-container {
   margin-top: 1em;
 }
 
+.sea-sidebar-open.sea-sidebar-list-initiatives .map-app-sidebar-button {
+  transform: translateX(var(--sidebar-width));
+}
+
 .map-app-sidebar-button button {
   padding: 0 0.45em;
   font-size: 2.4em;
@@ -500,9 +504,12 @@ div.map-app-map-container {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
+.map-app-sidebar-button button:hover {
+  transform: translateX(0px);
+}
+
 .w3-btn:hover {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transform: translateX(0px);
 }
 
 .map-app-sidebar-header {