Header and navbar refactoring

[davide-negretti]

The current code of the header and navbar have some issues:

• it could make customisation very difficult
• it caused some issues related to z-index which required some workarounds to be fixed
• it could be improved from a "semantic" point of view ( and tags are not used properly)
• it does not take full advantages of Bootstrap responsivity features

This is the current structure of the header (for the DSpace theme):

• HEADER-NAVBAR-WRAPPER component
  • HEADER component – <header>
    • <nav> – Mobile header (hidden on desktop mode)
      • DSpace logo
      • Buttons (search bar, language switch, user menu…)
    • NAVBAR component
      • <nav>
        • DSpace logo
        • Collapsing navigation menu
        • Buttons (search bar, language switch, user menu…)

This could be simplified as follows: all duplicate code should be removed and Bootstrap features should be used in order to handle desktop and mobile modes:

• HEADER-NAVBAR-WRAPPER component
  • HEADER component - <header>
    • DSpace logo
    • NAVBAR component (hidden on mobile mode)
    • Buttons (search bar, language switch, user menu…)
    • Navbar toggler (hidden on desktop mobile)
  • NAVBAR component (on mobile mode only, when expanded)

These changes should also make easier to handle dspace and base themes.

[davide-negretti]

I'd like to work on this refactoring, as I've already done this for some customised themes. the estimated effort is 8 hours.

[tdonohue]

This is directly related to #2368 . We currently have accessibility issues with the header because of the repeated <nav> section. So, if this refactor can fix those accessibility issues while also not introducing new accessibility issues, it'd be a welcome change.

@davide-negretti : I'll assign this to you. Thanks for volunteering! Just keep in mind that any changes here need to pass accessibility tests (in our e2e tests, and using a browser accessibility scanner like axe DevTools)

[davide-negretti]

@tdonohue The refactoring of header and navbar is almost complete. It took longer than expected as there were a few issues with Bootstrap classes that were used incorrectly, and the navbar section components had a lot of complex CSS code that caused any small change to break something somewhere else (I removed most of the CSS styles and achieved the same result through Bootstrap classes).
I still have to fix the admin sidebar, which shares the same navbar section components.
I managed to preserve all accessibility features and to make dropdown menus accessible as well. I also found some accessibility issues in the admin sidebar, which I am going to fix as well.

[tdonohue]

Ported to 7.6.x in #2858