UX: always close hamburger menu when navigating to admin (#32651)

awesomerobot · web-flow · commit 1afdb5df7b5f · 2025-05-08T16:08:11.000-04:00
When we create a custom homepage using the `custom_homepage` modifier we can hide the sidebar using `{{hideApplicationSidebar}}` in the template — this forces the hamburger dropdown to appear in the header. This creates an issue when navigating from the custom homepage to the admin area, because when the route transitions the hamburger menu isn't closed... and at this point, it cannot be closed at all. The `clickOutside` listener from the open menu is calling `toggleNavigation`, which is now the sidebar... so instead of closing the hamburger menu, it toggles the sidebar and prevents other elements from being clicked (because the `clickOuside` listener is only removed when the hamburger menu is destroyed). ![image](https://github.com/user-attachments/assets/b6893513-6f0e-4f5b-8d47-6b63916c0a29) This change ensures that when the admin sidebar is forced, the hamburger menu will be hidden.
diff --git a/app/assets/javascripts/admin/addon/services/admin-sidebar-state-manager.js b/app/assets/javascripts/admin/addon/services/admin-sidebar-state-manager.js
@@ -5,6 +5,7 @@ import AdminSearchModal from "admin/components/modal/admin-search";
 
 export default class AdminSidebarStateManager extends Service {
   @service sidebarState;
+  @service header;
 
   STORE_NAMESPACE = "discourse_admin_sidebar_experiment_";
   keywords = {};
@@ -67,6 +68,11 @@ export default class AdminSidebarStateManager extends Service {
     this.sidebarState.setSeparatedMode();
     this.sidebarState.hideSwitchPanelButtons();
     this.sidebarState.isForcingSidebar = true;
+
+    // we may navigate to admin from the header dropdown
+    // and when we do, we have to close it
+    this.header.hamburgerVisible = false;
+
     return true;
   }
 }
