Customizable mobile navigation

[lenadax]

Description

This pull request enhances the Mobile Navigation component to be more customizable. Key changes:

• Refactoring the Mobile Navigation component for improved configurability.
• Introducing a new MenuItem component, which is extracted and customized from the original MobileNavigation.
• Introducing a new file MobileNavigationToggler containing the default Hamburger Menu as a separate component.

Motivation/Context

These changes are intended to make the Mobile Navigation component more adaptable to different use cases and easier to extend or override.

• Flexible Nav Depth:
  The MobileNavigation can now cycle through more than three nav levels, based on navDepth configuration in the theme's index.js file. The default behavior of the theme will not change and is still limited to three levels.
  This adapted behavior reduces code length and allows the possible usage of the component as a main navigation for more nav levels, without being limited by VLT's header space requirements.

• Customizable Burger Menu:
  Creating a separate file MobileNavigationToggler containing the burger menu leaves developers an option to easily override the default animated Burger Menu element without overriding the entire MobileNavigation.

• Consistent positioning:
  As I was working on the MobileNavigation, I noticed the MobileNavigation Search Icon and Header were not consistently positioned when entering/leaving a submenu. Minimal css changes in this PR ensure correct positioning throughout submenues.

Please review the changes and let me know if there are any improvements or adjustments needed.

[sneridagh]

@lenadax Do this PR modify the existing HTML structure of the mobile menu or have any change in the classnames, etc? We consider these changes a breaking change, and if so, we should issue it. Basically we follow the same policy as in Volto for definition of breaking.

I will have a closer look now.

[lenadax]

@lenadax Do this PR modify the existing HTML structure of the mobile menu or have any change in the classnames, etc? We consider these changes a breaking change, and if so, we should issue it. Basically we follow the same policy as in Volto for definition of breaking.

I will have a closer look now.

Yes, in order to make the Hamburger menu overridable, an additional container is required. Since the Burger Menu styles come from Volto and are applied to .hamburger elements, I had to change the class hamburger to hamburger-toggler and include an additional hamburger element inside the MobileNavigationToggler component.

Otherwise, the styles (::before and ::after) would still be applied to the button if the template is customized with another icon.

[danalvrz]

@lenadax it looks very good, thank you for your work. There are only a couple minor things we should maybe adjust before merging, please take a look at the comments.

Even though most of the HTML was not changed, we are introducing a wrapper that could be breaking for a project that depends on the previous markup. I think this PR is a good change, just to keep that in mind. cc @sneridagh

[sneridagh]

@lenadax merging this now! Thanks for your contribution! I hope it's the first of many others!

FYI, we decided to ship this as a breaking, I think it's important to stick to the definition of breaking. I will take care of it when I make the release, therefore this will be in 4.x series.