Apply redesign to nav and footer

[mtruj013]

Done

• Update to latest global nav version
• Apply redesign to nav and footer as per Jira ticket

QA

• View the site locally in your web browser at: https://microk8s-io-614.demos.haus/
• Check nav and footer against design
• Make sure all links work as expected (/features will 404, this will be fixed once https://github.com/canonical/microk8s.io/pull/613 is merged)

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-5794

[webteam-app]

Demo starting at https://microk8s-io-614.demos.haus

[codecov[bot]]

Codecov Report

Merging #614 (ef7818e) into microk8s-refresh (aceaf40) will not change coverage. Report is 1 commits behind head on microk8s-refresh. The diff coverage is n/a.

:exclamation: Current head ef7818e differs from pull request most recent head c70c969. Consider uploading reports for the commit c70c969 to get more accurate results

@@                Coverage Diff                @@
##           microk8s-refresh     #614   +/-   ##
=================================================
  Coverage             72.58%   72.58%           
=================================================
  Files                     2        2           
  Lines                    62       62           
=================================================
  Hits                     45       45           
  Misses                   17       17           

Flag	Coverage Δ
python	72.58% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

[mtruj013]

Thanks @anthonydillon, fixed! Could you take a look again?

[anthonydillon]

Thanks for the fixes @mtruj013 Looks and works great!

[lyubomir-popov]

u-no-margin--bottom here please:

(driveby)

logo too indented here:

menu items should align under the wordmark microk8s (coukld be a vanilla bug)

would be nice to retain some layout on medium screens, e.g.:

[mtruj013]

@lyubomir-popov ready for another look

[lyubomir-popov]

LGTM, thanks @mtruj013 . can I as kfor a driveby - add u-no-margin-bottom on the landing page h1

[mtruj013]

@lyubomir-popov sorry, totally thought I'd added it. It's there now

[lyubomir-popov]

we need to fix this somewhere too:

[juanruitina]

Lovely to see the new navigation and footer. We need however to implement the sliding navigation here so the global nav shows up as it should on mobile: as only one item you can then open. You can see what I mean here on Figma. @petesfrench might be able to help with the implementation, he is familiar with it.

[petesfrench]

Lovely to see the new navigation and footer. We need however to implement the sliding navigation here so the global nav shows up as it should on mobile: as only one item you can then open. You can see what I mean here on Figma. @petesfrench might be able to help with the implementation, he is familiar with it.

Happy to help with this, but the best course of action would be to implement it on the global-nav itself. This needs to be done at one point and will mean it is available across all projects.

[mtruj013]

re: sliding navigation in the global nav. It was decided during stand-up the this will be updated directly on the global-nav, we will go live with this site as is

@juanruitina would you mind giving UX+1 if all else is well?