FEATURE: optional whitespace between default Discourse and custom links

This commit adds a toggle that allows you to add some whitespace between the Discourse header icons and the icons added via this component. The space is only added on desktop due to lack of space on mobile devices.

Author: hnb-ku

common/common.scss

@@ -9,3 +9,18 @@
     display: none;
   }
 }
+
+// whitespace
+@if $add_whitespace == "true" {
+  .desktop-view:not(.anon) {
+    .last-custom-icon {
+      margin-right: 2.5em;
+    }
+    &.rtl {
+      .last-custom-icon {
+        margin-right: 0;
+        margin-left: 2.5em;
+      }
+    }
+  }
+}

javascripts/discourse/initializers/initialize-for-header-icon-links.js

@@ -9,15 +9,17 @@ export default {
       try {
         const splitLinks = settings.Header_links.split("|").filter(Boolean);
 
-        splitLinks.forEach((link) => {
+        splitLinks.forEach((link, index, links) => {
           const fragments = link.split(",").map((fragment) => fragment.trim());
           const title = fragments[0];
           const icon = iconNode(fragments[1].toLowerCase());
           const href = fragments[2];
           const className = `header-icon-${dasherize(fragments[0])}`;
           const viewClass = fragments[3].toLowerCase();
           const target = fragments[4].toLowerCase() === "blank" ? "_blank" : "";
-          const selector = `li.${className}.${viewClass}`;
+          const isLastLink =
+            link === links[links.length - 1] ? ".last-custom-icon" : "";
+          const selector = `li.custom-header-icon-link.${className}.${viewClass}${isLastLink}`;
 
           api.decorateWidget("header-icons:before", (helper) => {
             return helper.h(selector, [

settings.yml

@@ -16,6 +16,11 @@ Header_links:
       </ul>
       <b>URL</b>: the desired URL you want the link to point to. <br>
       <b>Target</b>: same tab (self) or new tab (blank)."
+add_whitespace:
+  type: bool
+  default: false
+  description:
+    en: "If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component"
 Svg_icons:
   type: "list"
   list_type: "compact"