COMPATIBILITY: Modernize the component

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

common/common.scss

@@ -81,7 +81,7 @@
 }
 
 // hide on scroll when nav is positioned to left of header:
-.title .custom-header-links.scrolling {
+.d-header .custom-header-links.scrolling {
   display: none;
 }
 

javascripts/discourse/api-initializers/dropdown-header.gjs

@@ -0,0 +1,16 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomHeaderLinks from "../components/custom-header-links";
+
+export default apiInitializer("1.29.0", (api) => {
+  if (!settings.header_links) {
+    return;
+  }
+
+  if (settings.links_position === "right") {
+    api.headerButtons.add("dropdown-header", CustomHeaderLinks, {
+      before: "auth",
+    });
+  } else {
+    api.renderAfterWrapperOutlet("home-logo", CustomHeaderLinks);
+  }
+});

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

@@ -0,0 +1,35 @@
+import Component from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DiscourseURL from "discourse/lib/url";
+import CustomIcon from "./custom-icon";
+
+export default class CustomHeaderDropdown extends Component {
+  @service site;
+  @service router;
+
+  @action
+  redirectToUrl(url) {
+    if (this.site.mobileView) {
+      this.toggleHeaderLinks();
+    }
+
+    DiscourseURL.routeTo(url);
+  }
+
+  <template>
+    <li
+      class="custom-header-dropdown-link"
+      title={{@item.title}}
+      {{on "click" (fn this.redirectToUrl @item.url)}}
+    >
+      <CustomIcon @icon={{@item.icon}} />
+      <span class="custom-header-link-title">{{@item.title}}</span>
+      {{#if @item.description}}
+        <span class="custom-header-link-desc">{{@item.description}}</span>
+      {{/if}}
+    </li>
+  </template>
+}

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

@@ -0,0 +1,111 @@
+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 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 {
+  @service siteSettings;
+  @service site;
+  @service currentUser;
+
+  @notEmpty("dropdownLinks") hasDropdown;
+
+  get shouldDisplay() {
+    if (!settings.security) {
+      return true;
+    }
+
+    const permissions = JSON.parse(settings.security);
+    const getPermissions = permissions
+      .filter((p) => p.headerLinkId === this.item.id)
+      .map((p) => p.title);
+
+    const currentUserGroups = this.currentUser?.groups.map((g) => g.name);
+
+    if (getPermissions?.length < 1) {
+      return true;
+    }
+
+    if (getPermissions.length < 0) {
+      return false;
+    }
+
+    if (!this.currentUser) {
+      return false;
+    }
+
+    if (currentUserGroups.includes(getPermissions[0])) {
+      return true;
+    }
+
+    return false;
+  }
+
+  get showCaret() {
+    return settings.show_caret_icons && this.hasDropdown;
+  }
+
+  get dropdownLinks() {
+    const allDropdownItems = settings.dropdown_links
+      ? JSON.parse(settings.dropdown_links)
+      : [];
+
+    const dropdownLinks = allDropdownItems.filter(
+      (d) => d.headerLinkId === this.item.id
+    );
+
+    return dropdownLinks;
+  }
+
+  @action
+  redirectToUrl(url) {
+    if (this.site.mobileView) {
+      this.toggleHeaderLinks();
+    }
+
+    DiscourseURL.routeTo(url);
+  }
+
+  <template>
+    {{#if this.shouldDisplay}}
+      <li
+        class={{concatClass
+          "custom-header-link"
+          (if @item.url "with-url")
+          (if this.hasDropdown "has-dropdown")
+        }}
+        title={{@item.title}}
+        {{(if
+          @item.url (modifier on "click" (fn this.redirectToUrl @item.url))
+        )}}
+      >
+        <CustomIcon @icon={{@item.icon}} />
+        <span class="custom-header-link-title">{{@item.title}}</span>
+
+        {{#if this.showCaret}}
+          <span class="custom-header-link-caret">
+            {{dIcon "caret-down"}}
+          </span>
+        {{/if}}
+
+        {{#if this.hasDropdown}}
+          <ul class="custom-header-dropdown">
+            {{#each this.dropdownLinks as |dropdownItem|}}
+              <CustomHeaderDropdown
+                @item={{dropdownItem}}
+                @toggleHeaderLinks={{this.toggleHeaderLinks}}
+              />
+            {{/each}}
+          </ul>
+        {{/if}}
+      </li>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,72 @@
+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 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 CustomHeaderLink from "./custom-header-link";
+
+export default class CustomHeaderLinks extends Component {
+  @service siteSettings;
+  @service site;
+
+  @tracked showLinks = !this.site.mobileView;
+
+  @action
+  toggleHeaderLinks() {
+    this.showLinks = !this.showLinks;
+
+    if (this.showLinks) {
+      document.body.classList.add("dropdown-header-open");
+    } else {
+      document.body.classList.remove("dropdown-header-open");
+    }
+  }
+
+  get headerLinks() {
+    return JSON.parse(settings.header_links);
+  }
+
+  <template>
+    <nav
+      class={{concatClass
+        "custom-header-links"
+        (if @outletArgs.minimized "scrolling")
+      }}
+    >
+      {{#if this.site.mobileView}}
+        <span class="btn-custom-header-dropdown-mobile">
+          <DButton
+            @icon="caret-square-down"
+            @title={{i18n "custom_header.discord"}}
+            @action={{this.toggleHeaderLinks}}
+          />
+        </span>
+      {{/if}}
+
+      {{#if this.showLinks}}
+        <ul
+          class="top-level-links"
+          {{(if
+            this.site.mobileView
+            (modifier
+              closeOnClickOutside
+              this.toggleHeaderLinks
+              (hash target=this.element)
+            )
+          )}}
+        >
+          {{#each this.headerLinks as |item|}}
+            <CustomHeaderLink
+              @item={{item}}
+              @toggleHeaderLinks={{this.toggleHeaderLinks}}
+            />
+          {{/each}}
+        </ul>
+      {{/if}}
+    </nav>
+  </template>
+}

javascripts/discourse/components/custom-icon.gjs

@@ -0,0 +1,31 @@
+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";
+
+@tagName("")
+export default class CustomIcon extends Component {
+  @equal("sourceType", "image_url") isImageUrl;
+  @equal("sourceType", "font_awesome") isFontAwesome;
+
+  get sourceType() {
+    return settings.icon_source;
+  }
+
+  get source() {
+    return this.icon.trim();
+  }
+
+  <template>
+    {{#if this.source}}
+      <span class={{concatClass "custom-header-link-icon" @class}}>
+        {{#if this.isImageUrl}}
+          <img src={{this.source}} />
+        {{else if this.isFontAwesome}}
+          {{dIcon this.source}}
+        {{/if}}
+      </span>
+    {{/if}}
+  </template>
+}