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:
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:
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:
}
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,
1 Like