Integrate Navigation and move Skip Link to Brand

[tochwill]

Resolves #4571
Overall change:
This PR implements the following:

Integrate Psammead components and handle state for AMP and Canonical. (#4571 and #4570)
Add entry and exit animation for navigation dropdown, for AMP and Canonical. (#4579)
Move skip to content link from navigation to brand component (#2829)

Code changes:

• Integrated the Psammead navigation components
• Integrated newest version of Psammead brand component
• Moved script link out of navigation into brand
• Moved translations for navigation menu button into translations object
• Added media query listener hook

---

• I have assigned myself to this PR and the corresponding issues
• I have added labels to this PR for the relevant pod(s) affected by these changes
• I have assigned this PR to the Simorgh project

Testing:
The expected behaviour for this PR is as follows:

• For all page types - the navigation remains as it currently behaves on live for screen widths > 599px.

• For screen widths below 599px and below, for all page types:

  • The navigation links appear within a horizontally scrollable navigation, alongside a menu button.
  • When the menu button is selected, the navigation links in the scrollable navigation disappear, and a dropdown menu with the navigation links appears. The rest of the page is pushed down below this menu. This animates in on the canonical pages, but does not animate on AMP pages.
  • On selecting the menu button again, the dropdown menu disappears, and the scrollable menu reappears.
  • The skip to content link appears before the navigation in the header, and DOES NOT appear in the footer.
  • Known issue - the horizontally scrollable menu may not work until focus is within the menu on internet explorer. This was previously tested in the psammead component, and marked as won't fix (due to the likelyhood of a user browsing the site on IE at a screen width of below 600px, as well as levels of traffic for IE).

• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)

• If necessary, I have run the local E2E non-smoke tests relevant to my changes (CYPRESS_APP_ENV=local CYPRESS_SMOKE=false npm run test:e2e:interactive)

• This PR requires manual testing

[PriyaKR]

Blocked by ios testing.

[tochwill]

Seeing a couple of issues on Opera Mini extreme mode (also seeing some live issues on Opera Mini) - having a chat about this today

[PriyaKR]

@tochwill Have tested on ios using the heroku app url looks good but i am seeing the page content blocked in opera mini in extreme mode looks good in data savings high and off mode.

Also voice over on ios looks good.All good from testing perspective except opera mini issue.

[tochwill]

@PriyaKR have spoken to Jim and Neil about Opera Mini issues, they'd like to go ahead with releasing and create new issues to fix Opera Mini issues this week.

[tochwill]

Just need to update bundle size config

[tochwill]

Fixing failing tests...