REFACTOR: fix active state, fix hiding, simplify

desktop/desktop.scss → common/common.scss

@@ -6,8 +6,7 @@
 
 @if $Hide_default_links == "true" {
   #navigation-bar {
-    li:nth-child(1),
-    li:nth-child(2) {
+    li:not(.navigation-toggle):not([class*="custom_"]) {
       display: none;
     }
   }

javascripts/discourse/initializers/init-nav-bar-additions.js

@@ -0,0 +1,28 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+
+export default {
+  name: "nav-links-component",
+
+  initialize() {
+    withPluginApi("0.8", (api) => {
+      const itemsSetting = settings.Nav_links;
+      const items = itemsSetting.split("|").map((item) => item.trim());
+
+      for (const item of items) {
+        const splitSec = item.split(";").map((section) => section.trim());
+        const filter = splitSec[0].replace(/\s+/g, "-").toLowerCase();
+        const title = splitSec[1];
+        const location = splitSec[2];
+
+        api.addNavigationBarItem({
+          name: `custom_${filter}`,
+          displayName: filter,
+          title,
+          href: location,
+          forceActive: (category, args, router) =>
+            router.currentURL.includes(location),
+        });
+      }
+    });
+  },
+};

settings.yml

@@ -2,12 +2,16 @@ Nav_links:
   type: list
   default: "Latest;topics with recent posts;/latest|Categories;all topics grouped by category;/categories|Top;the most active topics in the last year, month, week or day;/top"
   description:
-    en: "Semicolon delimited in this order: display name;description;URL. Display name is the text that shows on the menu. Description is the help text that shows on hover. URL is the path for the link."
+    en: |
+      Semicolon delimited in this order: <strong>display name;description;URL</strong>
+      <br/><strong>Display name:</strong> text that shows on the menu
+      <br/><strong>Description:</strong> text that shows on hover
+      <br/><strong>URL:</strong> the link (e.g., <code>/latest</code> or <code>https://discourse.org</code>)
 Hide_dropdowns:
   default: false
   description:
     en: "Hide category and tag dropdowns"
 Hide_default_links:
   default: false
   description:
-    en: "Hide the default 'Latest' and 'Categories' links on both mobile and desktop. Some Discourse settings will need to be changed. See theme topic on Meta"
+    en: "Hide the default links on both mobile and desktop."