FEATURE: optional whitespace between default Discourse and custom links

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.

diff --git a/common/common.scss b/common/common.scss
index 0b8553e..aee2c0b 100644
--- a/common/common.scss
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/javascripts/discourse/initializers/initialize-for-header-icon-links.js b/javascripts/discourse/initializers/initialize-for-header-icon-links.js
index 4036145..2641e4f 100644
--- a/javascripts/discourse/initializers/initialize-for-header-icon-links.js
+++ b/javascripts/discourse/initializers/initialize-for-header-icon-links.js
@@ -9,7 +9,7 @@ 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());
@@ -17,7 +17,9 @@ export default {
           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, [
diff --git a/settings.yml b/settings.yml
index 368328f..93de8d5 100644
--- a/settings.yml
+++ b/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"

GitHub sha: 5032b0837a061de0d0fc00c4c08f8afe0bebd03c

Bug report? Updating it I have this error in its custom page:

Error: Undefined variable: “$add-whitespace”. on line 14 of common.scss >> @if $add_whitespace == “true” { ----^

the error message dissappears when checking / unchecking the new whitespace checkbox option