Add new tab support && update linting

.npmrc

@@ -0,0 +1,2 @@
+engine-strict = true
+auto-install-peers = false

.streerc

@@ -0,0 +1,2 @@
+--print-width=100
+--plugins=plugin/trailing_comma,plugin/disable_auto_ternary

about.json

@@ -3,7 +3,7 @@
   "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.0",
+  "theme_version": "1.1",
   "assets": {},
   "modifiers": {
     "svg_icons": [

eslint.config.mjs

@@ -0,0 +1,3 @@
+import DiscourseRecommendedTheme from "@discourse/lint-configs/eslint-theme";
+
+export default [...DiscourseRecommendedTheme];

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

@@ -7,7 +7,6 @@ import { inject as service } from "@ember/service";
 import concatClass from "discourse/helpers/concat-class";
 import DiscourseURL from "discourse/lib/url";
 import dIcon from "discourse-common/helpers/d-icon";
-import CustomHeaderDropdown from "./custom-header-dropdown";
 import CustomIcon from "./custom-icon";
 
 export default class CustomHeaderLink extends Component {
@@ -65,12 +64,18 @@ export default class CustomHeaderLink extends Component {
   }
 
   @action
-  redirectToUrl(url) {
+  redirectToUrl(item) {
     if (this.site.mobileView) {
       this.toggleHeaderLinks();
     }
 
-    DiscourseURL.routeTo(url);
+    if (item.newTab) {
+      window.open(item.url, "_blank");
+    } else {
+      DiscourseURL.routeTo(item.url);
+    }
+
+    event.stopPropagation();
   }
 
   <template>
@@ -82,9 +87,7 @@ export default class CustomHeaderLink extends Component {
           (if this.hasDropdown "has-dropdown")
         }}
         title={{@item.title}}
-        {{(if
-          @item.url (modifier on "click" (fn this.redirectToUrl @item.url))
-        )}}
+        {{(if @item.url (modifier on "click" (fn this.redirectToUrl @item)))}}
       >
         <CustomIcon @icon={{@item.icon}} />
         <span class="custom-header-link-title">{{@item.title}}</span>
@@ -98,10 +101,22 @@ export default class CustomHeaderLink extends Component {
         {{#if this.hasDropdown}}
           <ul class="custom-header-dropdown">
             {{#each this.dropdownLinks as |dropdownItem|}}
-              <CustomHeaderDropdown
-                @item={{dropdownItem}}
-                @toggleHeaderLinks={{this.toggleHeaderLinks}}
-              />
+              <li
+                class="custom-header-dropdown-link"
+                title={{dropdownItem.title}}
+                role="button"
+                {{on "click" (fn this.redirectToUrl dropdownItem)}}
+              >
+                <CustomIcon @icon={{dropdownItem.icon}} />
+                <span
+                  class="custom-header-link-title"
+                >{{dropdownItem.title}}</span>
+                {{#if dropdownItem.description}}
+                  <span
+                    class="custom-header-link-desc"
+                  >{{dropdownItem.description}}</span>
+                {{/if}}
+              </li>
             {{/each}}
           </ul>
         {{/if}}

package.json

@@ -1,12 +1,15 @@
 {
-  "name": "discourse-dropdown-header",
-  "repository": "https://github.com/paviliondev/discourse-dropdown-header/",
-  "author": "Keegan George",
-  "license": "GPL-2.0-or-later",
+  "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "^1.3.7",
-    "ember-template-lint": "^5.13.0",
-    "eslint": "^8.56.0",
-    "prettier": "^2.8.8"
+    "@discourse/lint-configs": "2.2.2",
+    "ember-template-lint": "6.0.0",
+    "eslint": "9.15.0",
+    "prettier": "2.8.8"
+  },
+  "engines": {
+    "node": ">= 18",
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm",
+    "pnpm": ">= 9"
   }
 }