How is the main menu (hamburger) link/panel generated?

stance455 · April 30, 2022, 10:36pm

Excuse my lack of expertise on the topic but how does Discourse handle the clicking of the hamburger menu link?

Context: I’m using the prerender.io service to serve an HTML version of the main (JS version of the site)

The ~~menu~~ hamburger link doesn’t work.

~~You can test ( the site ) by using the chrome dev tools and changing the agent to Googlebot smartphone. When using the googlebot user agent you’re in effect getting the HTML prerender version.~~

Side Note: According to this blog post from prerender , it could have issues with code like

`<a onclick=”goTo(‘page’)”>Anchor</a>`
`<a href=”javascript:goTo(‘page’)”>Anchor</a>`
`<span onclick=”goTo(‘page’)”>Anchor</span>`

All links need to be between tags and define a target URL within the href attribute for Google to be able to find and follow it.

Perhaps the main menu link is generated using this method?

Any ideas on a solution would be very much appreciated.

Edit I took the site off prerender for now ( but keeping JS version served to bots ) - Surprisingly google bot seems to render it correctly once in a while. I also have no menu issues when using the google bot as the user agent in chrome. Im going to test this for a little bit.

stance455 · May 1, 2022, 4:25pm

My apologies here, I made a simple question quite confusing …

The links within the menu seem fine, my issue is just the actual hamburger link itself - when rendered with prerender it just won’t open.

This post by @Johani was super helpful in trying to diagnose

Am I on the right track looking at this bit of code ( as far as the functionality for when you click the hamburger menu )

awesomerobot · May 2, 2022, 2:48pm

The menu is appended to the document with Javascript when the button is clicked, so it won’t easily be converted to work on an HTML-only version of the site.

Here’s where the button is added, you can see it has an action named toggleHamburger:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L246

      
        
              classNames: ["search-dropdown"],
            });
            
            
icons.push(search);
            
            
const hamburger = this.attach("header-dropdown", {
              title: "hamburger_menu",
              icon: "bars",
              iconId: "toggle-hamburger-menu",
              active: attrs.hamburgerVisible,
              action: "toggleHamburger",
              href: "",
              classNames: ["hamburger-dropdown"],
            
            
  contents() {
                let { currentUser } = this;
                if (currentUser && currentUser.reviewable_count) {
                  return h(
                    "div.badge-notification.reviewables",
                    {
                      attributes: {

The toggleHamburger action is defined later in the same file, here:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L483

      
        
            
            
  this.state.userVisible = !this.state.userVisible;
              this.toggleBodyScrolling(this.state.userVisible);
            
            
  // auto focus on first button in dropdown
              schedule("afterRender", () =>
                document.querySelector(".user-menu button")?.focus()
              );
            },
            
            
toggleHamburger() {
              this.state.hamburgerVisible = !this.state.hamburgerVisible;
              this.toggleBodyScrolling(this.state.hamburgerVisible);
            
            
  // auto focus on first link in dropdown
              schedule("afterRender", () => {
                document.querySelector(".hamburger-panel .menu-links a")?.focus();
              });
            },
            
            
toggleBodyScrolling(bool) {

toggleHamburger changes the hamburgerVisible state, so the menu is ultimately added with panels.push(this.attach("hamburger-menu")); which you can see here:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L379

      
        
            }
            
            
const panels = [this.attach("header-buttons", attrs), headerIcons];
            
            
if (state.searchVisible) {
              panels.push(
                this.attach("search-menu", {
                  inTopicContext: state.inTopicContext && inTopicRoute,
                })
              );
            } else if (state.hamburgerVisible) {
              panels.push(this.attach("hamburger-menu"));
            } else if (state.userVisible) {
              panels.push(this.attach("user-menu"));
            }
            
            
additionalPanels.map((panel) => {
              if (this.state[panel.toggle]) {
                panels.push(
                  this.attach(
                    panel.name,

stance455 · May 2, 2022, 8:46pm

Quality response @awesomerobot , I’m sure the community appreciates it.

I will look this over to see if custom work is worth it.

The response I got from prerender.io was basically if it uses “complicated JS” it probably wont work. Not sure how well they studied the situation though.

system · June 1, 2022, 8:46pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Reuse Discourse Hamburger Functionality support	10	2520	July 10, 2020
Add custom menu panel to the correct location (same as hamburger menu panel) dev	8	1450	May 18, 2021
Header Submenus theme-component official , header-submenus	80	34342	January 18, 2024
Ability to add a custom section of links to the sidebar feature sidebar	15	3176	February 18, 2023
A tour of how the Widget (Virtual DOM) code in Discourse works dev	75	27879	July 10, 2023

How is the main menu (hamburger) link/panel generated?

Related Topics