UX: Sections not collapsable in "header dropdown" navigation menu (#21604)

What is the problem?

This is a follow up to 4cca7de22d. In the
commit, CSS was used to disable the collapsing of sections in the header
dropdown navigation menu when the `navigation_menu` site setting is set
to `header dropdown`. However, using CSS is not the correct approach as
the underlying code is still marking the section as collapsable which
means that the sections will still be displayed as collapsed with no way
to "uncollapse" if the local store has already marked the section as
collapsed.

What is the fix?

This commit removes the usage of CSS to hide the collapsabe button and
instead correctly marks the section as not collapsable in the code.

app/assets/javascripts/discourse/app/components/sidebar/anonymous/sections.hbs

@@ -1,5 +1,5 @@
 <div class="sidebar-sections sidebar-sections-anonymous">
-  <Sidebar::Anonymous::CustomSections />
+  <Sidebar::Anonymous::CustomSections @collapsable={{@collapsableSections}} />
   <Sidebar::Anonymous::CategoriesSection
     @collapsable={{@collapsableSections}}
   />

app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs

@@ -1,7 +1,7 @@
 <Sidebar::Section
   @sectionName={{this.section.slug}}
   @headerLinkText={{this.section.decoratedTitle}}
-  @collapsable={{true}}
+  @collapsable={{@collapsable}}
   @headerActions={{this.section.headerActions}}
   @headerActionsIcon={{this.section.headerActionIcon}}
   @class={{this.section.dragCss}}

app/assets/javascripts/discourse/app/components/sidebar/common/custom-sections.hbs

@@ -1,5 +1,8 @@
 <div class="sidebar-custom-sections">
   {{#each this.sections as |section|}}
-    <Sidebar::Common::CustomSection @sectionData={{section}} />
+    <Sidebar::Common::CustomSection
+      @sectionData={{section}}
+      @collapsable={{@collapsable}}
+    />
   {{/each}}
 </div>

app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs

@@ -9,7 +9,7 @@
         <div class="sidebar-hamburger-dropdown">
           <Sidebar::Sections
             @currentUser={{this.currentUser}}
-            @collapsableSections={{true}}
+            @collapsableSections={{this.collapsableSections}}
           />
           <Sidebar::Footer @tagName="" />
         </div>

app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.js

@@ -5,9 +5,22 @@ import { inject as service } from "@ember/service";
 export default class SidebarHamburgerDropdown extends Component {
   @service appEvents;
   @service currentUser;
+  @service site;
+  @service siteSettings;
 
   @action
   triggerRenderedAppEvent() {
     this.appEvents.trigger("sidebar-hamburger-dropdown:rendered");
   }
+
+  get collapsableSections() {
+    if (
+      this.siteSettings.navigation_menu === "header dropdown" &&
+      !this.args.collapsableSections
+    ) {
+      return this.site.mobileView || this.site.narrowDesktopView;
+    } else {
+      this.args.collapsableSections;
+    }
+  }
 }

app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs

@@ -1,5 +1,5 @@
 <div class="sidebar-sections">
-  <Sidebar::User::CustomSections />
+  <Sidebar::User::CustomSections @collapsable={{@collapsableSections}} />
   <Sidebar::User::CategoriesSection @collapsable={{@collapsableSections}} />
 
   {{#if this.currentUser.display_sidebar_tags}}

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js

@@ -9,7 +9,7 @@ import {
 } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance(
-  "Sidebar - Logged on user - Experimental sidebar and hamburger setting disabled",
+  "Sidebar - Logged on user - Legacy navigation menu enabled",
   function (needs) {
     needs.user();
 
@@ -27,7 +27,29 @@ acceptance(
 );
 
 acceptance(
-  "Sidebar - Logged on user - header dropdown navigation menu enabled",
+  "Sidebar - Logged on user - Mobile view - Header dropdown navigation menu enabled",
+  function (needs) {
+    needs.user();
+    needs.mobileView();
+
+    needs.settings({
+      navigation_menu: "header dropdown",
+    });
+
+    test("sections are collapsable", async function (assert) {
+      await visit("/");
+      await click(".hamburger-dropdown");
+
+      assert.ok(
+        exists(".sidebar-section-header.sidebar-section-header-collapsable"),
+        "sections are collapsable"
+      );
+    });
+  }
+);
+
+acceptance(
+  "Sidebar - Logged on user - Desktop view - Header dropdown navigation menu enabled",
   function (needs) {
     needs.user();
 
@@ -52,6 +74,16 @@ acceptance(
       );
     });
 
+    test("sections are not collapsable", async function (assert) {
+      await visit("/");
+      await click(".hamburger-dropdown");
+
+      assert.notOk(
+        exists(".sidebar-section-header.sidebar-section-header-collapsable"),
+        "sections are not collapsable"
+      );
+    });
+
     test("'more' dropdown should display as regular list items in header dropdown mode", async function (assert) {
       await visit("/");
       await click(".hamburger-dropdown");

app/assets/stylesheets/desktop/menu-panel.scss

@@ -54,14 +54,6 @@
     }
   }
 
-  .sidebar-section-wrapper .sidebar-section-header-caret {
-    display: none;
-  }
-
-  .sidebar-section-header-collapsable {
-    pointer-events: none; // disabling collapsible sections
-  }
-
   .sidebar-custom-sections .d-icon-globe {
     left: -0.9em;
     top: 0.35em;