DEV: Improve header dropdown toggle on mobile view

Author: Arkshine

common/common.scss

@@ -38,6 +38,19 @@
         }
       }
 
+      &.has-dropdown {
+        &.is-open {
+          .custom-header-link-caret svg {
+            transform: rotate(0deg);
+          }
+        }
+        &:not(.is-open) {
+          .custom-header-dropdown {
+            transform: scale(0);
+          }
+        }
+      }
+
       &:hover {
         color: $main_link_hover_color;
 

javascripts/discourse/components/custom-header-link.gjs

@@ -1,9 +1,11 @@
+import { tracked } from "@glimmer/tracking";
 import Component from "@ember/component";
 import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { notEmpty } from "@ember/object/computed";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
+import { and, not } from "truth-helpers";
 import concatClass from "discourse/helpers/concat-class";
 import DiscourseURL from "discourse/lib/url";
 import dIcon from "discourse-common/helpers/d-icon";
@@ -14,6 +16,8 @@ export default class CustomHeaderLink extends Component {
   @service site;
   @service currentUser;
 
+  @tracked dropdownOpen = true;
+
   @notEmpty("dropdownLinks") hasDropdown;
 
   get shouldDisplay() {
@@ -48,7 +52,11 @@ export default class CustomHeaderLink extends Component {
   }
 
   get showCaret() {
-    return settings.show_caret_icons && this.hasDropdown;
+    return (
+      settings.show_caret_icons &&
+      this.hasDropdown &&
+      (!this.site.mobileView || !this.item.url)
+    );
   }
 
   get dropdownLinks() {
@@ -64,7 +72,12 @@ export default class CustomHeaderLink extends Component {
   }
 
   @action
-  redirectToUrl(item) {
+  toggleDropdown() {
+    this.dropdownOpen = !this.dropdownOpen;
+  }
+
+  @action
+  redirectToUrl(item, event) {
     if (this.site.mobileView) {
       this.toggleHeaderLinks();
     }
@@ -85,9 +98,14 @@ export default class CustomHeaderLink extends Component {
           "custom-header-link"
           (if @item.url "with-url")
           (if this.hasDropdown "has-dropdown")
+          (if this.dropdownOpen "is-open")
         }}
         title={{@item.title}}
         {{(if @item.url (modifier on "click" (fn this.redirectToUrl @item)))}}
+        {{(if
+          (and (not @item.url) this.site.mobileView this.hasDropdown)
+          (modifier on "click" (fn this.toggleDropdown))
+        )}}
       >
         <CustomIcon @icon={{@item.icon}} />
         <span class="custom-header-link-title">{{@item.title}}</span>

test/acceptance/dropdown-header-test.js

@@ -3,6 +3,7 @@ import { test } from "qunit";
 import sinon from "sinon";
 import {
   acceptance,
+  query,
   queryAll,
   visible,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -494,3 +495,64 @@ acceptance("Dropdown header - Redirect to URL", function (needs) {
     );
   });
 });
+
+acceptance("Dropdown header - Mobile view", function (needs) {
+  needs.mobileView();
+
+  needs.hooks.beforeEach(() => {
+    settings.header_links = JSON.stringify(headerLinksSettingFixtures);
+    settings.dropdown_links = JSON.stringify(dropdownLinksSettingFixtures);
+  });
+
+  needs.hooks.afterEach(() => {
+    settings.header_links = "[]";
+    settings.dropdown_links = "[]";
+  });
+
+  test("it toggles the header dropdown on click", async function (assert) {
+    await visit("/");
+
+    const headerLinkElement = query(".custom-header-links button");
+    await click(headerLinkElement);
+
+    assert.ok(
+      visible(".top-level-links"),
+      "The top header dropdown is visible"
+    );
+
+    const linksElements = queryAll(".custom-header-link");
+    const linkElement = linksElements[0];
+
+    assert.ok(
+      linkElement.classList.contains("is-open"),
+      "The header dropdown is visible initially"
+    );
+
+    await click(linkElement);
+
+    assert.notOk(
+      linkElement.classList.contains("is-open"),
+      "The header dropdown is hidden after click"
+    );
+  });
+
+  test("it doesn't render the caret icon on header link with URL defined", async function (assert) {
+    await visit("/");
+
+    const headerLinkElement = query(".custom-header-links button");
+    await click(headerLinkElement);
+
+    const linksElements = queryAll(".custom-header-link");
+    const caretElement = linksElements[1].querySelector(
+      ".custom-header-link-caret"
+    );
+
+    assert.strictEqual(caretElement, null, `The caret wrapper is not rendered`);
+    assert.notOk(
+      caretElement
+        ?.querySelector("svg")
+        ?.classList.contains("d-icon-caret-down"),
+      `The icon is not rendered`
+    );
+  });
+});