Custom Hamburger Menu Links

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

It is for both. As admin you get to see the Make this section public and visible to everyone checkbox at the bottom of the new custom menu section modal. if you don’t enable that, it is your personal menu. if you enable it, it is a global one.

Also, it looks like my menu customizing theme components work in drop down mode (just tested them). :thinking:

1 Like