Product Menu: Flex layout

[labkey-nicka]

Rationale

This updates the ProductMenu (often referred to as the "Mega Menu") to utilize flex layout for menu sections. This simplifies the layout logic that is necessary and makes it so we can include static menu sections (e.g. plates) underneath dynamic menu sections (e.g. samples).

Related Pull Requests

• Product Menu: Flex layout #1469
• https://github.com/LabKey/limsModules/pull/125
• Product Menu: Flex layout testAutomation#1888

Changes

• Update product menu DOM structure to better support flex layout container/item paradigm.
• Use flex layout both horizontally (row-wise) across the product and vertically (column-wise) within each section column.
• Scroll within dynamic menu sections leaving the section headers position constant.
• Apply a "no-scroll" CSS class to the document body when product navigation is open. This prevents page scrolling.

[cnathe]

@labkey-nicka I did some manual testing locally. The column / section scrolling behavior looks much better!

I found one small display issue when viewing the menu in a project without subfolders. The left side doesn't get any padding to match the right side:

[labkey-nicka]

@labkey-nicka I did some manual testing locally. The column / section scrolling behavior looks much better!

I found one small display issue when viewing the menu in a project without subfolders. The left side doesn't get any padding to match the right side:

Sure. This was case before my changes. I've adjusted so the first-child column always applies a padding-left.