Issues with adding menu panels

dev
1

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:

  1. 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 header widget.

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

https://github.com/discourse/discourse/pull/7325

4 Likes
2

Hm, that sounds like an oversight on my part when implementing, pardon the dust

6 Likes