Update header and footer components

[sarawilcox]

No description provided.

[Moll-Lee]

Hi @sarawilcox , I can't update the description for some reason but I have added some info below.

Since 2020 the Navigation team within NHS.UK has been updating and iterating its header functionality to better meet users' needs. The main changes in the new header is to expose key links to the site that users may want to navigate to (in NHS.UK's case this is items such as health A-Z). This change has increased the number of clicks to these areas from previously where these links were hidden behind a 'menu' button. The menu button itself has changed to 'more' with an arrow icon as this has also shown improved interactions on mobile screens where it is not possible to show all key links exposed within the header. (see pictures for details). The changes also include dynamic resizing of the header, where if a user is viewing on a smaller screen width the links will hide within the more button based on screen size.

There are also some minor updates to styling to keep in line with the rest of the site which have been documented and should be added to this ticket.

We are proposing to add the new style header and footer to the front-end library, design system and prototype kit as evidence shows that these changes are helping users more easily find what they are looking for ..

[Moll-Lee]