UX: handle opening composer from slide-in hamburger menu (#159)

javascripts/discourse/api-initializers/hamburger-click-outside-transformer.js

@@ -0,0 +1,10 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8", (api) => {
+  api.registerValueTransformer(
+    "hamburger-dropdown-click-outside-exceptions",
+    ({ value }) => {
+      return [...value, ".topic-drafts-menu-content"];
+    }
+  );
+});

javascripts/discourse/components/sidebar-new-topic-button.gjs

@@ -3,6 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { service } from "@ember/service";
 import { gt } from "truth-helpers";
 import CreateTopicButton from "discourse/components/create-topic-button";
@@ -13,6 +14,8 @@ export default class SidebarNewTopicButton extends Component {
   @service currentUser;
   @service siteSettings;
   @service router;
+  @service header;
+  @service appEvents;
 
   @tracked category;
   @tracked tag;
@@ -74,12 +77,30 @@ export default class SidebarNewTopicButton extends Component {
     this.tag = this.router.currentRoute.attributes?.tag || null;
   }
 
+  @action
+  watchForComposer() {
+    // this covers opening drafts from the hamburger menu
+    this.appEvents.on("composer:will-open", this, this.closeHamburger);
+  }
+
+  @action
+  stopWatchingForComposer() {
+    this.appEvents.off("composer:will-open", this, this.closeHamburger);
+  }
+
+  @action
+  closeHamburger() {
+    this.header.hamburgerVisible = false;
+  }
+
   <template>
     {{#if this.shouldRender}}
       <div
         class="sidebar-new-topic-button__wrapper"
         {{didInsert this.getCategoryandTag}}
         {{didUpdate this.getCategoryandTag this.router.currentRoute}}
+        {{didInsert this.watchForComposer}}
+        {{willDestroy this.stopWatchingForComposer}}
       >
         <CreateTopicButton
           @canCreateTopic={{this.canCreateTopic}}

scss/sidebar.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
   @include breakpoint(medium) {
@@ -80,3 +82,12 @@
     display: none;
   }
 }
+
+// put the draft menu above the slide-out hamburger on small desktop screens
+@include viewport.until(md) {
+  html:not(.mobile-view) {
+    .topic-drafts-menu-content {
+      z-index: z("modal", "overlay");
+    }
+  }
+}