This is slightly rough but should get you 99% of the way there when it comes to having an additional menu item with a dropdown panel. Calling this one a pizza menu . Add this to your header.html file.
<script type="text/discourse-plugin" version="0.8">
api.createWidget('pizza-menu', {
tagName: 'div.pizza-panel',
panelContents() {
return "hello world";
},
html() {
return this.attach('menu-panel', {
contents: () => this.panelContents()
});
},
clickOutside() {
this.sendWidgetAction('togglePizza');
}
});
api.decorateWidget('header-icons:after', function(helper) {
const headerState = helper.widget.parentWidget.state;
let contents = [];
contents.push(helper.attach('header-dropdown', {
title: 'pizza-menu',
icon: 'cutlery',
active: headerState.pizzaVisible,
iconId: 'toggle-pizza-menu',
action: 'togglePizza',
}));
if (headerState.pizzaVisible) {
contents.push(helper.attach('pizza-menu'));
}
return contents;
});
api.attachWidgetAction('header', 'togglePizza', function() {
this.state.pizzaVisible = !this.state.pizzaVisible;
});
</script>