Since the addition of the Full Height Swipable Menus, getting a custom menu panel to work properly has become a bit tricky, particularly on mobile.
The addHeaderPanel api method still adds the menu in the correct place in the DOM, which is great, however there are a few other elements you need to add to get the panel working correctly:
-
Custom mobile cleanup code in the panel widget when the panel closes on mobile, see e.g. https://github.com/discourse/discourse/commit/71d8807fec20e9a4a766b9763ff0c9ba8980f62e#diff-a362332e13d860478ac77243b7279a77L327. Ideally this would be abstracted out of each individual menu (including the core ones) into the
headerwidget. -
I’m not sure exactly why, but if the
additionalPanelsare added to the header html after theheader-cloak, theheader-cloakretains the custom style attributes added to animate the cloak’s removal in the closing process. If theadditionalPanelsare added before the cloak, like the other menu panels, this issue does not occur. In any event, I’ve submitted a PR for this piece, i.e. adding the additionalPanels directly after the normal panels and before the cloak.