Header Component

[ichim-david]

Component demo: https://eea.github.io/volto-kitkat-frontend/?path=/story/layout-header--default

• [x] Use Semantic ui component elements as much as possible https://codesandbox.io/s/semantic-ui-example-forked-8vmmj?file=/example.js I made a quick demo from the react semantic menu examples on how you can have a 3 level deep dropdown Here is another real world example of customization of Navigation.jsx that adds a dropdown menu https://github.com/eea/volto-freshwater/blob/master/src/customizations/components/theme/Navigation/Navigation.jsx#L251 Used here: https://water.europa.eu/marine/state-of-europe-seas/state-of-biodiversity/benthic-habitats
• [x] Use the following json structure for adding any items that are level 1, 2 or level 3 https://gist.github.com/ichim-david/b43ae8c756e246c872d6feb6bcaecea4
• [x] Usability issue: when opening the mega-menu, clicking outside the manu, e.g. on the white header area, or the EEA logo, should close the menu. Having only the big-X to close is not good, some users misses the big-X sign and just click outside.
• [ ] Fix CSS broken by Volto integration work.

[demarant]

I found a Usability issue: when opening the mega-menu, clicking outside the manu, e.g. on the white header area, or the EEA logo, should close the menu. Having only the big-X to close is not good, some users misses the big-X sign and just click outside.

[tiberiuichim]

The usability issue has been fixed, moving back to ITML for css fixes (I broke some mobile styling due to refactoring, it was necessary to make improve the components hierarchy and allow better integration with Volto).