How to change the link associated with a button in the user menu panel

dev
1

Instead of the highlighted button pointing to u/miles/summary, I’d rather have it point to u/miles/activity. How can I do this? I tried to look it up online (it seems that you have to change the dara-url attribute with Javascript, but the only way I saw to do this was to first get the id of the element, which this element does not have.)

PIC
PIC1920×1080 480 KB

1 Like
2

You’d need to reopen the relevant widget in a Theme Component, something like:

api.reopenWidget("user-menu-links", {
  profileGlyph() {
    return {
      title: Titles["profile"],
      className: "user-preferences-link menu-link",
      id: QuickAccess.PROFILE,
      icon: "user",
      action: UserMenuAction.QUICK_ACCESS,
      actionParam: QuickAccess.PROFILE,
      data: { url: `${this.attrs.path}/activity` },
      role: "tab",
      tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
    };
  },
})
3 Likes
3

Thanks! Make sense, I think.
One thing though, I’m putting this through </head> but getting the error: SyntaxError: unknown: Unexpected token, expected "," (28:6)

<script type="text/discourse-plugin" version="0.8">    
    api.reopenWidget("user-menu-links", {
      profileGlyph() {
        return {
          title: Titles["profile"],
          className: "user-preferences-link menu-link",
          id: QuickAccess.PROFILE,
          icon: "user",
          action: UserMenuAction.QUICK_ACCESS,
          actionParam: QuickAccess.PROFILE,
          data: { url: `${this.attrs.path}/activity` },
          role: "tab",
          tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
        };
      },
    }
</script>
1 Like
4

Above was missing a closing ), updated

2 Likes
6

No error now, but… Now it causes the user-menu-links dropdown to not even open. Any idea why this is the case?

1 Like
7

What did you do to debug it?

Looking at the javascript console in the browser is always a good start.

If you take a look, there are three obvious issues (ultimately).

The solution is pretty straightforward in this case, you just need to supply the missing constants:

      const UserMenuAction = {
        QUICK_ACCESS: "quickAccess",
      };

      const QuickAccess = {
        BOOKMARKS: "bookmarks",
        MESSAGES: "messages",
        NOTIFICATIONS: "notifications",
        PROFILE: "profile",
      };
      
      const Titles = {
        bookmarks: "user.bookmarks",
        messages: "user.private_messages",
        notifications: "user.notifications",
        profile: "user.preferences",
      };

Once you add these (from the original source code), it works :tada:

(But see Faizaan’s optimisation below that negates the need for these, which is even better :slight_smile: )

2 Likes
8

More simply

<script type="text/discourse-plugin" version="0.8">    
api.reopenWidget("user-menu-links", {
  profileGlyph() {
   const glyph = this._super(...arguments);
   glyph['data'] = { url: `${this.attrs.path}/activity` };
   return glyph;
  },
}

Not tested though :wink:

3 Likes
9

Yep, much better and avoids need for constants - nice optimisation! :slight_smile:

3 Likes
10

Actually, you can go even further and omit that:

      api.reopenWidget("user-menu-links", {
        profileGlyph() {
         const glyph = this._super();
         glyph['data'] = { url: `${this.attrs.path}/activity` };
         return glyph;
        }
      });

As there are no arguments

3 Likes
11

Thanks guys! Working perfectly. Learning a lot about editing Discourse too!

2 Likes