Custom Hamburger Menu Links

tshenry · March 9, 2021, 1:07am

Maybe this will help?

https://github.com/discourse/discourse-custom-hamburger-links/commit/d7eacfd7019bd48b939ac4b482986061d4207f1f

That seemed to be the most requested feature and it wasn’t too hard to add support. That’s it for now though

Richie · March 9, 2021, 5:01pm

My life is now complete

Thank you @tshenry this is fantastic news

Krunnie · April 20, 2021, 5:38pm

Hey quick question, how does one localize the custom hamburger menu text? I want to fully localize my forum and I can’t seem to find the text anywhere.

thegurjyot · May 24, 2021, 8:35pm

This is a useful component. But can we add font awesome icons there? It would be great to show social media profile icons there, so that people can follow our social profiles easily.

gomezcarsonk · May 25, 2021, 1:35pm

That is fantastic, thank you!
Maybe you can tell me quickly - how to localize the custom hamburger menu text?

nolo · July 1, 2021, 10:11am

I added support for icons, you could try out this fork of the component: GitHub - nolosb/discourse-custom-hamburger-links-with-icons

Two notes on usage:

The icon would be the first item in the list:

If you want a link without icon, just don’t add it, but keep the trailing comma ,
If the icon is not included by default, remember to add it to the icon list:

thegurjyot · July 3, 2021, 6:51am

Can you puch these changes to the official Theme component? It’s always better to have the official Theme component installed as it’s going to be maintained with Discourse future updates.

AquaL1te · July 4, 2022, 6:53am

It would be nice to have this merged with the official plugin. I want to add social media buttons in the hamburger menu. But without icons it would not look as nice.

Also, it’s a bit unclear that no space is allowed in the CSV fields.
This works: Footer Link,https://google.com,f
But with spaces the item gets inserted in the general field rather than the footer, because of the missing space: Footer Link, https://google.com, f

Canapin · October 15, 2022, 11:16pm

Hi!

With the new sidebar, being able to add custom icons to our links would be a nice addition.

I can try to work on this and do a PR in the following days…

Canapin · October 17, 2022, 10:52pm

Quick question…

I’ve installed the theme component on a new Discourse instance, but for some unidentified reason, the default links won’t appear in the more section of the sidebar:

I didn’t modify the code, it’s a fresh theme component install.

However, the theme component, installed two years ago, works on my other forum:

No error is displayed. Any idea why the theme component doesn’t work on my new install?

Don · October 18, 2022, 5:48am

I noticed this too and it seems to only the external links not appears under More.

MarcP · October 22, 2022, 2:10pm

I use internal links in this component, for example, I have a link that opens user invites: /my/invited/pending/

When opening the link from the sidebar I get: Oops! That page doesn’t exist or is private.

The link works when accessed from the URL bar.

When entering the full URL (https://domain.com/my/invited/pending/) the URL opens like this:
https://domain.com/https://domain.com/my/invited/pending/

Jagster · October 22, 2022, 2:32pm

Yep. Known issue.

Don · October 22, 2022, 3:16pm

Hello,
This is should work with: Chat,/chat/browse/open

Jagster · October 22, 2022, 3:20pm

Yeah, I know. I sended my comment perhaps a little bit too fast. Well, defenetly too fast, because I should say there must use path instead full url.

Extra link for the chat… well, new sidebar changed the playground totally and it is not needed anymore.

Canapin · November 8, 2022, 12:53am

I took a look at Discourse’s sidebar code and @nolo icons addition.

It seems that currently, it’s not possible to customize the icon’s custom links because the hamburger menu decoration method doesn’t take into account the prefixValue constant (which contains the icon’s name) or something like that…

It also seems to me that hamburger-menu decorations with api.decorateWidget are going to be depreciated. See:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534


      
                      // Skip external links support for now
                      return;
                    }
                  } else {
                    args.route = route;
                  }
          
          
        this.addCommunitySectionLink(args, name.match(/footerLinks/));
                } catch {
                  deprecated(
                    `Usage of \`api.decorateWidget('hamburger-menu:generalLinks')\` is incompatible with the \`enable_experimental_sidebar_hamburger\` site setting. Please use \`api.addCommunitySectionLink\` instead.`
                  );
                }
          
          
      return;
              }
            }
          }
          
          
/**
           * Adds a new action to a widget that already exists. You can use this to

Also, the fact that external links don’t work anymore could come from this:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524


      
            const args = {
              name: className || textContent.replace(/\s+/g, "-").toLowerCase(),
              title: textContent,
              text: textContent,
            };
          
          
  if (href) {
              if (DiscourseURL.isInternal(href)) {
                args.href = href;
              } else {
                // Skip external links support for now
                return;
              }
            } else {
              args.route = route;
            }
          
          
  this.addCommunitySectionLink(args, name.match(/footerLinks/));
          } catch {
            deprecated(
              `Usage of \`api.decorateWidget('hamburger-menu:generalLinks')\` is incompatible with the \`enable_experimental_sidebar_hamburger\` site setting. Please use \`api.addCommunitySectionLink\` instead.`

So that there should be some changes in core to make this available.

My knowledge of how Discourse works is almost non-existent so I could be very wrong.

Am I right about my findings?

asirota · January 6, 2023, 9:58pm

I’ve installed this theme component from github repo. running 3.0.0.beta15 on my discourse and even though I appear to have added it, the hamburger menu doesn’t show my link… Any ideas?

Canapin · January 7, 2023, 1:30pm

It may be related to:

To this day, external links still don’t work.
And internal links must begin with a relative path, not a full path.

rahim123 · January 13, 2023, 2:42pm

Thanks a lot for this useful component. I need to add a few important internal links, but now that the hamburger menu is integrated into the sidebar I find that they’re not very visible under the More menu. Users are usually terrible at finding things, so I really need to put them in the top level, ideally right after My posts. Are there any CSS hacks to accomplish this?

nathank · January 13, 2023, 10:37pm

Beyond what CSS can achieve I think. The discourse team do have this on their roadmap, but it isn’t happening quickly (I think):