feat: Megamenu

[mgax]

Fixes https://github.com/ietf-tools/wagtail_website/issues/326

• Rename class MenuItem to SecondaryMenuItem.
• Create a model to represent the new megamenu MainMenuItem. Populate with initial data based on the content of the former main menu.
• Render the megamenu using the Bootstrap Dropdown component, with a small amount of additional styling.
• Some light fixes to header markup and styling.
• Remove unused variables from template context and get the remaining ones to load lazily. This jumped out as a performance issue when logged in as admin – the wagtail userbar generates template context several times, so it's important for the menu content to load only when needed.

Menu logic

• Each Main menu item has an associated Page. It can be any page in the website.
  • If the page has Megamenu links (in its main section or secondary sections; see below), clicking it displays a Megamenu.
  • Otherwise, the menu item is a simple link to the page.
• Main menu items that expand to Megamenus display the following content:
  • The page's introduction field is shown on the left 1/3 column.
  • Links, grouped in sections, show on the right 2/3 column; each section has a heading, followed by links which flow in 2 equal columns.
  • Main section:
    • The heading is the title of the page associated with the Main menu item.
    • If the page is published, the heading is also a link to the page.
    • Otherwise, the heading is not a link.
    • Links to child pages (if they are published, and have the Show in menus flag enabled, regardless of whether they are index pages or not).
  • Secondary sections: defined in the Secondary sections streamfield of the Main menu item.
    • Each link may point to a Page in the website or an external URL.
    • The link's label defaults to the page's title but it may be overridden in the title field.
• Initial data:
  • One Main menu item for each page that was previously in the menu, in the same order.
  • For each child of that page, if any of its published sub-children have Show in menus enabled, a section is created in Secondary sections, containing those sub-children.

Screenshots

• An expanded megamenu
• The editor with preview

[kesara]

@mgax In your PR description, did you forget to add the screenshots?

[mgax]

@mgax In your PR description, did you forget to add the screenshots?

Yes indeed, fixed, thanks!

[kesara]

This change doesn't work with IAB website. Because when IAB layout is selected sub menus don't work. See: (with IAB layout for IAB site)

(with IETF layout for IAB site)

The new IAB site will have submenus as well: https://temporary.iab.org/

[mgax]

This change doesn't work with IAB website. Because when IAB layout is selected sub menus don't work.

That's weird, I've tested locally with a fresh restore of the IAB database, and the current megamenu branch (commit 0b257a7), and the menu looks just like on https://temporary.iab.org.

On this PR, IAB used to be broken, but commit 398561d fixed it. Looking at the 2nd screenshot, (with IETF layout for IAB site):

It seems there are MainMenuItem snippets in the database, which shouldn't be the case – commit 398561d changed the migration to only create MainMenuItem records if there is an home.HomePage page present, and the IAB database (at least, my copy of it) doesn't have one.

@kesara I suspect an earlier version of this branch was deployed to the IAB instance, so an older version of the migration utils.0009_megamenu was run. Could you please make sure the repository is at commit 0b257a7, then roll back the migration, and apply it again?

./manage.py migrate utils 0007
./manage.py migrate

[kesara]

It seems there are MainMenuItem snippets in the database, which shouldn't be the case – commit 398561d changed the migration to only create MainMenuItem records if there is an home.HomePage page present, and the IAB database (at least, my copy of it) doesn't have one.

@mgax I had the up-to-date branch, but I ran it as a multisite where I had an IETF database and created a separate IAB Home for testing. I'll go forward with the current changes. But it would be nice to have a mega menu that will work when there a multiple sites (both IETF & IAB varients) on the same instance.

[mgax]

But it would be nice to have a mega menu that will work when there a multiple sites (both IETF & IAB varients) on the same instance.

It should work though. Perhaps the if that checks whether the current website has the IETF or IAB theme could be improved. The one for the megamenu is the same as the one which was already in place for the home page and the secondary menu. My suggestion would be to use ietf.utils.models. LayoutSettings to make the decision.

[kesara]

Yeah, LayoutSettings would be best thing to use.