🎨 [#1378] Header multiple navigation (mobile and desktop)

[jiromaykin]

new mobile header designs + 2 new desktop menus:
https://projects.invisionapp.com/share/B3137YU0PZY2#/screens?browse

In order to view the styles correctly for review: turn off the Django CMS-toolbar
(http://127.0.0.1:8000/?toolbar_off)

adds feature to issue mobile: https://taiga.maykinmedia.nl/project/open-inwoner/task/1378
also adds feature to issue for desktop header: https://taiga.maykinmedia.nl/project/open-inwoner/task/1377
and adds feature to issue for indicator + dot: https://taiga.maykinmedia.nl/project/open-inwoner/task/1398

📲 Mobile menu:

• visually looks like 1 list of all pages + subpages for Onderwerpen
• no stickies: menu + search bar must scroll out of view when menu is closed
• search bar is visible in opened mobile menu
• message/plans notifications visible
• some new icons
  Mobile menu works in all browsers the same

🖥️ Desktop menu:

• two separate menus for 1) Onderwerpen and 2) is_authenticated
• subpages must not be visible on hover, only on toggle/click
• message/plans notifications visible
• needs to be accessible (close on Escape and out-of-Focus, open on Tab and open on 1 click)

🔔 Note:
NB: in Firefox desktop the Tab can't reach the submenu-items unless accessibility.tabfocus is set to number=7 in the about:config settings - which may be an issue on Mac only: https://support.mozilla.org/en-US/questions/1278793
NB: In Safari Tab won't work if user forgets to turn on accessibility (Settings > Advanced > Turn on Tab...).

[codecov-commenter]

Codecov Report

Merging #591 (c80f731) into develop (325d753) will increase coverage by 0.10%.
The diff coverage is 100.00%.

❗ Current head c80f731 differs from pull request most recent head 9ddb4d1. Consider uploading reports for the commit 9ddb4d1 to get more accurate results

@@             Coverage Diff             @@
##           develop     #591      +/-   ##
===========================================
+ Coverage    96.39%   96.50%   +0.10%     
===========================================
  Files          574      573       -1     
  Lines        19811    19773      -38     
===========================================
- Hits         19096    19081      -15     
+ Misses         715      692      -23     

Impacted Files	Coverage Δ
...pen_inwoner/components/templatetags/header_tags.py	100.00% <100.00%> (ø)
src/open_inwoner/plans/tests/test_views.py	96.54% <100.00%> (ø)

... and 2 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[jiromaykin]

@vaszig : these are the 3 new menus, all static for the moment.
I have added A LOT of console.logs to see if I can debug the problems in Safari - but after review I will remove all these logs.
For now you can test the menus in Chrome/Firefox etc. And see if they respond to Tab keys and Escape and if it isn't a mess.
These 3 menus are only for mobile and desktop (not for tablet width yet) - it was impossible to isolate the header in just mobile and desktop so that's why this PR tackles 3 issues at once.
And: tabs/escape work on Safari, but.. onClick events on the Desktop menu do not work in any Safari version yet 😢

[jiromaykin]

@Bartvaderkin this is the big one... up for review.
I handled 3 different issues in one PR because they all needed the new menus in order to work. Let me know if I need to change anything to make it easier for you to turn this into a dynamic menu.

[Bartvaderkin]

@jiromaykin the PR got outdated and has a merge conflict, can you rebase on develop and push again?

[jiromaykin]

@jiromaykin the PR got outdated and has a merge conflict, can you rebase on develop and push again?

@ bart Okay I will.