Custom Hamburger Menu Links

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.

3 Likes

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?

2 Likes

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

6 Likes

I use:

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Rechtliches </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ]

    // Mobile
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Force to wait until navigation has been loaded
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // Get the customNav Id
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

You can see the result at https://forum.courservio.de/
The original version of this code is from Add custom links to sidebar. Maybe it could help you.

6 Likes

@hosch Wow, very nice, exactly what I was looking for! Thanks very much.

1 Like

@hosch By any chance is it possible to move it higher up? I’d like it to appear after the Community section, or possibly even before it.


Edit: Looks like it’s possible with a variation on this:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* Setup a flex layout so you can reorder things */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

I wonder about moving it to the highest position?

1 Like

There is a quirk with this method where the custom div disappears when toggling the visibility of the sidebar, for example if the browser window is narrow. This is a problem especially for tablets, which usually get the desktop version of Discourse and require clicking on the hamburger menu to display the sidebar. Any possible workarounds? Thanks!


Edit: Solved here:

1 Like

Thanks @hosch and @Olivier_Lambert for making this.

Could you please explain to this newbie where I should insert this? :pray:

1 Like

How can I reorder elements in a sidebar / hamburger-menu section?

E.g. I want to put “All categories” above the categories in the “Categories” section, same with “All tags”.

Thank you!

1 Like

You know now how to use a component for CSS, right? Add that on head-section.

You can’t easily. Yet anyway. It is no totally finished and polished at the moment.

2 Likes

I tried this, it gave me an error on using a semicolon near src.

Let try again. Tnx

1 Like

This is still a thing, the solutions after did not fix the issue.

Setting: Invite friends,/my/invited/pending/,f

Off-topic:

I saw this condensed sidebar styling before, I can’t seem to find it anywhere. Is this a theme component?

1 Like

You can use this CSS:

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

:slight_smile:

image

8 Likes

We’ve just had to change our navigation menu setting from “Legacy” to “Header Dropdown”, before it’s enforced on us:

Most of our custom hamburger menu links have now disappeared, and the two remaining links are both broken :pensive:

Does this theme component support the new navigation @Johani ? :thinking:

Here’s how our burger menu used to look under the “Legacy” option:

Here’s how how it looks under the “Header Dropdown” option:

Notable differences:

  • Broken Link: Insurance
  • Broken Link: Membership
  • Missing: Drone Scene
  • Missing: Good 2 Go
  • Missing: Competitions
  • Missing: Drone Code

Any advice or support would be very much welcomed :blush:

1 Like

If it helps re the broken links, one example used to point to:

https://example.com/faq#insurance

But when you click on it now, under this new menu system, it now sends you to:

https://example.com/https://example.com/faq

1 Like

@Canapin did you ever find a solution to your problem back in October 2022? :thinking:

It might be the same problem we’re now facing.

1 Like

I believe this component is/will be discontinued since you can now add custom sections /links to your sidebars :thinking:

1 Like

We changed from “Legacy” to “Header Dropdown” as it’s the least disruptive, can we add custom links to the Header Dropdown menu? :thinking:

1 Like

Yes, click/tap the “+” icon at the bottom of the drop down menu to create new custom sections. it should be right beside the keyboard shortcuts button. :slight_smile: to edit sections, click the pencil icon beside the menu section header.

1 Like

D’oh :man_facepalming:

Thanks @Lilly - I saw that and assumed it was for each user to customise their own menu :man_facepalming:

I’ll take a closer look at it now.

1 Like