Merge pull request #14 from Arkshine/toggle-header-dropdown

DEV: Improve header dropdown toggle on mobile view

Author: angusmcleod

.rubocop.yml

@@ -0,0 +1,2 @@
+inherit_gem:
+  rubocop-discourse: stree-compat.yml

Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+group :development do
+  gem "rubocop-discourse"
+  gem "syntax_tree"
+end

Gemfile.lock

@@ -0,0 +1,102 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (8.0.2)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    ast (2.4.3)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.3)
+    drb (2.2.3)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    json (2.12.2)
+    language_server-protocol (3.17.0.5)
+    lint_roller (1.1.0)
+    logger (1.7.0)
+    minitest (5.25.5)
+    parallel (1.27.0)
+    parser (3.3.8.0)
+      ast (~> 2.4.1)
+      racc
+    prettier_print (1.2.1)
+    prism (1.4.0)
+    racc (1.8.1)
+    rack (3.1.16)
+    rainbow (3.1.1)
+    regexp_parser (2.10.0)
+    rubocop (1.76.0)
+      json (~> 2.3)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
+      parallel (~> 1.10)
+      parser (>= 3.3.0.2)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.45.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    rubocop-capybara (2.22.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.12.1)
+      activesupport (>= 6.1)
+      lint_roller (>= 1.1.0)
+      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
+      rubocop-rspec (>= 3.0.1)
+      rubocop-rspec_rails (>= 2.31.0)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.32.0)
+      activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
+      rack (>= 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.6.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.31.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+      rubocop-rspec (~> 3.5)
+    ruby-progressbar (1.13.0)
+    securerandom (0.4.1)
+    syntax_tree (6.2.0)
+      prettier_print (>= 1.2.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uri (1.0.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  rubocop-discourse
+  syntax_tree
+
+BUNDLED WITH
+   2.6.9

about.json

@@ -3,11 +3,9 @@
   "component": true,
   "about_url": "https://github.com/paviliondev/discourse-dropdown-header",
   "license_url": "https://github.com/paviliondev/discourse-dropdown-header/blob/main/LICENSE.txt",
-  "theme_version": "1.1",
+  "theme_version": "1.2",
   "assets": {},
   "modifiers": {
-    "svg_icons": [
-      "square-caret-down"
-    ]
+    "svg_icons": ["square-caret-down"]
   }
 }

common/common.scss

@@ -25,6 +25,7 @@
 
       &-icon {
         margin-right: 0.5rem;
+
         img {
           width: 1.5em;
           height: 1.5em;
@@ -33,11 +34,32 @@
 
       &-caret {
         margin-left: 0.5rem;
+
         svg {
           transition: transform 0.25s ease;
         }
       }
 
+      &.has-dropdown {
+        &.is-open {
+          .custom-header-link-caret svg {
+            transform: rotate(0deg);
+          }
+        }
+
+        &:not(.is-open) {
+          .custom-header-dropdown {
+            transform: scale(0);
+            opacity: 0;
+            position: absolute;
+          }
+
+          .custom-header-link-caret svg {
+            transform: rotate(90deg);
+          }
+        }
+      }
+
       &:hover {
         color: $main_link_hover_color;
 
@@ -62,6 +84,7 @@
     min-width: 200px;
     max-width: 280px;
     list-style: none;
+    opacity: 1;
     transform: scale(0);
     transition: transform 0.2s ease;
     transition-delay: 0.1s;

desktop/desktop.scss

@@ -5,7 +5,7 @@
     display: flex;
   }
 
-  @media screen and (max-width: 712px) {
+  @media screen and (width <= 712px) {
     display: none;
   }
 }

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

@@ -1,19 +1,23 @@
+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 dIcon from "discourse/helpers/d-icon";
 import DiscourseURL from "discourse/lib/url";
-import dIcon from "discourse-common/helpers/d-icon";
 import CustomIcon from "./custom-icon";
 
 export default class CustomHeaderLink extends Component {
   @service siteSettings;
   @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" this.toggleDropdown)
+        )}}
       >
         <CustomIcon @icon={{@item.icon}} />
         <span class="custom-header-link-title">{{@item.title}}</span>

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

@@ -2,11 +2,11 @@ import { tracked } from "@glimmer/tracking";
 import Component from "@ember/component";
 import { hash } from "@ember/helper";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import closeOnClickOutside from "discourse/modifiers/close-on-click-outside";
-import i18n from "discourse-common/helpers/i18n";
+import { i18n } from "discourse-i18n";
 import CustomHeaderLink from "./custom-header-link";
 
 export default class CustomHeaderLinks extends Component {

javascripts/discourse/components/custom-icon.gjs

@@ -2,7 +2,7 @@ import Component from "@ember/component";
 import { equal } from "@ember/object/computed";
 import { tagName } from "@ember-decorators/component";
 import concatClass from "discourse/helpers/concat-class";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
 
 @tagName("")
 export default class CustomIcon extends Component {

mobile/mobile.scss

@@ -17,7 +17,7 @@
     li {
       width: 100%;
 
-      @media screen and (min-width: 768px) {
+      @media screen and (width >= 768px) {
         width: auto;
       }
     }