UI and accessibility changes in the header

[barbaraperic]

This PR includes several changes to improve the UI and accessibility of the header and dropdown menu. Tested on Chrome, Safari and Firefox.

Change #1: Header structure

• Implementing grid instead of a flexbox makes sure that the logos are always centred, even if you add more items in the navbar. That also that prevents weird jumps when you resize the screen (video below), and fixes Safari bug where logos overlap.
• Suggestion - If you make the logo navigate to the Homepage, you can remove the Home link in the navbar - common UX practice.

Before

Resizing the screen and alignment breaks:

https://github.com/ipni/cid.contact/assets/50910606/4d5e269f-47d2-49fc-852a-d00f628bec39

Scenario of adding more items in the nav, alignment breaks:

Safari bug:

After

Grid layout:

Alignment doesn't break when adding more items:

Smoother transitions and no jumps when resizing, and logos stay centered:

https://github.com/ipni/cid.contact/assets/50910606/1240a92d-82c0-440d-9ea1-2fa4969d46c8

Change #2: Hamburger component

I have replaced <span> SVG elements in the dropdown burger button with pseudo elements ::before and ::after. Why? Less HTML code and now the icon can be animated if you decide to in the future. It also reduces the complexity of changing the style - if you wanted to be different length, color and similar. It could also be extracted as it's own component and reused somewhere else in the website.

Change #3: Dropdown UI

• light dropdown shadow to make dropdown stand out when on a light background
• fixed the hover effect on dropdown menu items

Before

After

Change #4: Dropdown accessibility

• dropdown component now traps the focus within, which allows users that use TAB to navigate effectively.

Before

https://github.com/ipni/cid.contact/assets/50910606/0864105b-a17f-4207-8839-6ff108e7019c

After

https://github.com/ipni/cid.contact/assets/50910606/81abc4e1-e610-466c-8480-3cf925cf9733