COMPATIBILITY: Modernize the component

.discourse-compatibility

@@ -0,0 +1 @@
+< 3.3.0.beta1-dev: f3561ce7fd9dded965fb8e9a99229539c7af3aa1

.eslintrc.cjs

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

.github/workflows/component-linting.yml

@@ -1,4 +1,4 @@
-name: Linting
+name: Discourse Theme
 
 on:
   push:
@@ -7,37 +7,5 @@ on:
   pull_request:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-
-      - name: Yarn install
-        run: yarn install
-
-      - name: ESLint
-        if: ${{ always() }}
-        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,javascripts}
-
-      - name: Prettier
-        if: ${{ always() }}
-        shell: bash
-        run: |
-          yarn prettier -v
-          shopt -s extglob
-          if ls @(javascripts|desktop|mobile|common|scss)/**/*.@(scss|js|es6) &> /dev/null; then
-            yarn prettier --list-different "@(javascripts|desktop|mobile|common|scss)/**/*.{scss,js,es6}"
-          fi
-          if ls test/**/*.@(js|es6) &> /dev/null; then
-            yarn prettier --list-different "test/**/*.{js,es6}"
-          fi
-
-      - name: Ember template lint
-        if: ${{ always() }}
-        run: yarn ember-template-lint javascripts --no-error-on-unmatched-pattern
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.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

@@ -1,5 +1,13 @@
-@import 'mixins';
-@import 'buttons';
+@import "mixins";
+@import "buttons";
+
+@if $links_position == "left" {
+  .home-logo-wrapper-outlet {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+}
 
 .custom-header-links {
   .top-level-links {
@@ -8,10 +16,11 @@
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    margin: 0;
 
     .custom-header-link {
       color: $main_link_color;
-      padding-block: 1rem;
+      padding-block: 0.5rem;
       cursor: default;
 
       &-icon {
@@ -55,7 +64,8 @@
     list-style: none;
     transform: scale(0);
     transition: transform 0.2s ease;
-    transition-delay: 0.3s;
+    transition-delay: 0.1s;
+    will-change: transform;
 
     &-link {
       color: $dropdown_item_color;
@@ -81,11 +91,11 @@
 }
 
 // hide on scroll when nav is positioned to left of header:
-.title .custom-header-links.scrolling {
+.d-header .custom-header-links.scrolling {
   display: none;
 }
 
-// maintains suitable spacing when Sign Up buttons are present
-.anon .d-header .sign-up-button {
-    margin-left: 1.25em;
+// maintains suitable spacing when auth buttons are present
+.anon .d-header .header-buttons:has(.custom-header-links) .auth-buttons {
+  margin-left: 1.25em;
 }

desktop/desktop.scss

@@ -1,4 +1,10 @@
 .custom-header-links {
+  display: flex;
+
+  .custom-header-link {
+    display: flex;
+  }
+
   @media screen and (max-width: 712px) {
     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,38 @@
+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, event) {
+    if (this.site.mobileView) {
+      this.toggleHeaderLinks();
+    }
+
+    DiscourseURL.routeTo(url);
+
+    event.stopPropagation();
+  }
+
+  <template>
+    <li
+      class="custom-header-dropdown-link"
+      title={{@item.title}}
+      role="button"
+      {{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>
+}