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.
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
I’m not sure exactly why, but if the
additionalPanelsare added to the header html after the
header-cloakretains the custom style attributes added to animate the cloak’s removal in the closing process. If the
additionalPanelsare 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.