Add link in user menu

[arjen]

Dear Discourse community,

I’m trying to add a small section in the user dropdown menu, and have been unsuccessful so far. I know that I can add items to the hamburger-menu through the decorateWidget function. However, it doesn’t look like the user-menu has a way to hook into it. Since the items I want to add are user-related, I would like to be able to add these links there and not in the hamburger-menu.

I have tried adding it in a plugin initialiser and simply add some DOM nodes, but the user-menu isn’t generated yet in the DOM before the user icon has been clicked.

Does anyone have any idea what the most graceful way of doing this is?

Kind regards,
Arjen

[Johani (Joe)]

You can use something like this in the </head> section under common:

<script type="text/discourse-plugin" version="0.8">
api.addUserMenuGlyph({
  label: "c_user_icon",
  className: "my-class", // change classnames
  icon: "heart", // change icon
  href: `/some/path` // change path
});

I18n.translations.en.js.c_user_icon = "label goes here"; // change label here
</script>

Here’s the result:

This is documented here:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L540-#L556

[arjen]

Hey @Johani,

First of all, thanks for the reply, it’s greatly appreciated. I’ve stumbled upon the possibility to add these glyphs. However, I’m looking for a somewhat different link.

What I’m trying to do is as follows:

Of course this was now achieved by manipulating the DOM in the dev-tools for example purposes.
Hope this clarifies more what I’m trying to achieve.

Kind regards,
Arjen

[riking (Kane York)]

A problem with putting your links there is that they might get pushed off the screen when the notification list fills up. That’s why there’s an extensibility point for the hamburger ☰ menu instead

[arjen]

Dear @riking,

Thanks for your reply!

I understand that the extensibility exists in the hamburger menu for this purpose and am aware of the risks of putting extra links in the user-menu. I do am still interested in figuring how to do to it like I described earlier. The “Log out” link also is always visible, and would like to re-use the logic used for that link as well for what I’m trying to achieve.

These are the requirements I’m currently working with, and we’re taking the risk of the notification-list being too long. Your advise is absolutely appreciated, and this message is not meant in anyway to disregard what you said, since you’re probably right.

Kind regards,
Arjen

[Osama]

So I took this as a challenge to test my skills and to try out Theme Creator and here is what I’ve got for you

Thanks to Theme Creator, you can try out this theme component live here: https://theme-creator.discourse.org/theme/Osama/extend-user-menu

Here is the code under Common in the </head> section:

<script type="text/discourse-plugin" version="0.8.13">
  const h = require('virtual-dom').h;
  I18n.translations.en.js.user.my_link = "My Link";
  api.reopenWidget('user-menu', {
      myLinkAction() {
          console.log("Hello there!"); // handle click on the link here
      },
      panelContents() {
        const sup = this._super(...arguments);
        sup.push(
          h('div.my-link', [
            h('ul.menu-links',
              h('li',
                this.attach('link', {
                  action: 'myLinkAction',
                  className: 'my-link',
                  icon: 'link',
                  label: 'user.my_link'
                })
              )
            )
          ])
        );
        return sup;
      }
  })
</script>

[arjen]

@Osama, thank you so much for your reply. This is indeed what I was looking for.

Very much appreciated!