Custom Top Navigation Links

try adding this

assigned;topics assigned to you;/latest?assigned=me
1 Like

Hold on, you confusing the two different components.

Custom Header Links & Nav Links Component

Nav Links is the one you looking for

3 Likes

LOL, you are right @IAmGav :sweat_smile: Nevermind, everything works, fake news.

2 Likes

Along with:

  • Hide all (Category & tags) dropdowns

Would it be possible to add:

  • Hide Categories dropdown
  • Hide Tags dropdown

So that each can be hidden separately or together?

Hello,
There are some warnings/errors after update to 2.9.0.beta2.
Maybe it was before 2.9.0 as I never pay attention earlier.

[Warning] [THEME 6 ‘Nav Links Component’] – “To prevent errors in tests, add a pluginId key to your modifyClass call. This will ensure the modification is only applied once.” (application-02f34826699ddd1471a048c99dbf7e34.js, line 4135, x2)

Does someone know how I could add a tag link that is actually relative to the current route? I’d like to use a tag About and offer it as a top link it to an About-topic relative to the category a user is in.

E.g. user is in category /c/feedback/7. Choosing About will direct to /tags/c/feedback/7/about.

2 Likes

I’d like to use the component on an instance but various behavior is not working:

  • When using “hide default links” it’s hiding the first two child items (Latest and Categories). But when one navigates to a category, the default “Categories”- Link is already not shown in the menu. Then this setting hides an additional navigation item, the otherwise third in line.

Screenshot from 2022-05-10 18-29-05

  • I added a menu item for a direct category link (/c/game-talk). When I navigate to it, it doesn’t get an active class and is not highlighted. Instead, the “Latest” link is highlighted and has an active class. This is not the default “Latest” link though, but one I added through the component (only linking to /latest)

  • Actually, the “Latest” link does not get an active class either when it is not named “Latest”. So the active class on the current route doesn’t seem to work at all because of the component. This is the view on /latest but with another name for the Latest-link:

Just installed 2.9.0.beta5 and now the 3 menu items I created with this plugin are not visible anymore. They’re still clickable, but not rendered in full. The 3 menu items are at the top of this forum.

Also reported here:

2 Likes

Quick question-
Trying to create this and make the url ?order=created so users can browse recent topics.

This works perfectly fine on desktop but fails on mobile- the navigation-bar just reloads and won’t show the dropdown menu.

I have same question…Is that a solution? :face_with_monocle:

I think i know why this happened…
the component has line below:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

Because of the reg…?itself is used as special reg mark,and the param is supposed to compare with window.location.search.
I fork the component , change it to the following code and it works.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }

Oh wow, well done :clap:

Where did you put this piece of code?

Discourse-nav-links-component/mobile/head_tag.html ,replace the match code. :face_with_peeking_eye:

1 Like

Why not make that a PR so that everyone can benefit?

3 Likes

Can I do that? I always think my code level is too poor…and feel a little embarrassed to do that.Thanks for the advice!!! I’ll revise it and make a PR!

1 Like

I think that about my contribution attempts too!!

However the @team (and their automated tools) seem to be pretty good at tidying code up.

Once you’ve made it a PR, you can post the PR link here in Meta and it displays an awesome embedded live update of the PR status.

4 Likes

Were you ever able to solve this? I’m having a similar problem

I can’t say I’ve found an ideal solution, but I found what the problem was for me.

The problem can be found here

Specifically, this part:

    api.modifyClass("component:navigation-item", {
      pluginId: 'discourse-nav-links-component',
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

It looks like this sets the “active” on each navigation link. Frankly, the logic of how it decides and what all these variables are is pretty opaque to me. But the problem is here:

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

To me, this is checking if the page URL is the same as the location of the nav bar URL, and if so it returns the result of contentFilterMode === filter, both variables being a bit unclear to me. If the condition fails, it looks like it just runs the regular logic of whether something should be marked as active (which is why my non-custom links seem to work fine). The problem is that while this code properly runs once per navigation link, the location variable always seems to be “categories” so the if statement is always false for custom links. Furthermore, even if I fix the “location” variable by replacing it with this.get("content").href, the return value is also always false because the filter variable is also always set to “categories”.

Normally I’d just do a PR to fix this, but the actual root problem still eludes me. I have come up with a workaround that works for me but slightly alters the documented functionality of this component so I’d rather not PR it. I think there will be edge cases where it doesn’t work also, like if your hompage is set to /latest

    api.modifyClass("component:navigation-item", {
      pluginId: 'discourse-nav-links-component',
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

Basically it just checks if the current URL includes the nav bar URL as a substring. If yes, it highlights it.

2 Likes

Is there any plan to fix this behaviour?

4 posts were split to a new topic: Custom relative tag filter on the nav bar