I want to add a topic to a top menu but not on all categories, just a specific one.
What code should I write?
Thanks
AI-generated summary
Francois_Douville wants to add a topic to the top menu for a specific category, not all categories. They found some related topics but none of them worked for a specific category. awesomerobot provided a solution, which is a JavaScript code that adds a custom nav item to a specific category. The code was customized for Francois_Douville’s needs, and it worked.
However, HeyRR mentioned that this solution no longer works after the deprecation of Discourse.NavItem. They suggested using the “Custom top navigation links” component, but it doesn’t have the same dynamic link functionality. HeyRR is looking for help to update the code to work with the current navigation-item component.
bekircem also tried the original solution but it didn’t work, and they suggested adding a plugin version.
Found those topics but none of them was for a specific category…
https://meta.discourse.org/t/how-to-add-external-link-on-top-menu/9508/6
https://meta.discourse.org/t/best-way-to-customize-top-menu/35336
Tested this solution a bit more (modified from this post) try this (replace “Travel” with your category name):
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href');
}.property('href')
});
I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };
Discourse.NavItem.reopenClass({
buildList : function(category, args) {
var list = this._super(category, args);
if(category && category.name == "Travel") {
list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
list.push(Discourse.ExternalNavItem.create({href: 'https://google.com', name: 'google'}));
}
return list;
}
});
</script>
I18n.translations.en.js.filters.bugs = { title: “Bugs”, help: “Open Bugs” };
I18n.translations.en.js.filters.google = { title: “Google”, help: “Navigate to Google” };
Those are for English-based forums…
Your forum is French, so use I18n.translations.fr instead.
Still the same thing with translations.fr
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href');
}.property('href')
});
I18n.translations.fr.js.filters.liste = { title: "Liste", help: "Liste des formations" };
Discourse.NavItem.reopenClass({
buildList : function(category, args) {
var list = this._super(category, args);
if(category && category.name == "Formations") {
list.push(Discourse.ExternalNavItem.create({href: '/t/liste-2-0-des-formations-sur-lautosuffisance-et-la-consommation-ecoresponsable-en-2018/306', name: 'Liste'}));
}
return list;
}
});
</script>
Try name: 'liste'instead
Where has that lovely calendar come from??
This seems no-longer works after deprecation of Discourse.NavItem , and someone mentioned in this post that Custom top navigation links can do the trick:
However, this component does not dynamic link where you want to check the link url based on current location.
For my use-case, I want to set different link for mainpage and sub-categories, e.g. to show an unfinished/finished tag filter nav item based on current categories, I used to able to use below code but now is not working:
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href');
}.property('href')
});
I18n.translations.en.js.filters.unfinished = { title: "tbc", help: "placeholder" };
I18n.translations.en.js.filters.finished = { title: "finished", help: "placeholder" };
Discourse.NavItem.reopenClass({
buildList : function(category, args) {
var list = this._super(category, args);
var url = category ? category.url : "";
// Main menu and 2 specific categories will have those 2 nav items with different url
if(!category || (category && url && (url.includes("mix") || url.includes("other")))) {
var tbc_url = category ? "/tags" + url + "/tbc" : "/tags/tbc";
var finish_url = category ? "/tags" + url + "/finished" : "/tags/finished";
list.push(Discourse.ExternalNavItem.create({href: tbc_url, name: 'tbc'}));
list.push(Discourse.ExternalNavItem.create({href: finish_url, name: 'finish'}));
}
return list;
}
});
</script>
Can someone help me on how can I update this code based on current navigation-item component? Or a more general question, how can I find the current usage of the replacement of Discourse.NavItem?
Thanks!
Is it still works? It didn’t work when I tried it, should we add a plugin version?