2567 mobile first header logo language selector navigation

ONSdigital / sdc-global-design-patterns

The SDC Global Design Pattern library. Used as the basis for SDC projects. Outputs to CDN for use in production and development projects, documentation publishes to netlify.

https://sdc-global-design-patterns.netlify.com/

11 stars 2 forks source link

2567 mobile first header logo language selector navigation #214

Closed bameyrick closed 5 years ago

bameyrick commented 5 years ago

What is the context of this PR?

Updated header and navigation to be optimised for mobile, created blue ghost button, and changed beta bar to match new design.

Breaking changes in this PR:

Navigation

Main nav and Page nav - Classes have changed to allow for the addition of page nav (child pages) to be included in the mobile nav solution and general clean up to match updated designs:

nav--inline replaces nav--horizontal.
nav--page replaces nav--sub.
nav__link--current replaces nav__item--current and moves to the link (page nav).
nav--progress replaces nav--vertical (better reflects the specific use).

Feedback/Beta

The inline feedback form has been removed.
A new beta banner component has been created which is positioned above the header.

How to review

Check everything looks good.

armstrongb commented 5 years ago

Needs to review with internal service and sectional navigation etc.

boxadesign commented 5 years ago

Again with the mobile nav against the title it looks unbalanced...

boxadesign commented 5 years ago

Is it the case that the mobile nav work is not in this PR?

bameyrick commented 5 years ago

@boxadesign We never really considered the mobile nav in this but I think we should. I'll have a chat about it with @will-madebymoon after lunch

will-madebymoon commented 5 years ago

Again with the mobile nav against the title it looks unbalanced...

We are ditching this mobile nav

boxadesign commented 5 years ago

@will-madebymoon So are suggesting that main navigation in services like SBR, R'Ops etc should be in the footer? I'm not sure. I'm on board with secondary links going down there but primary navigation needs to be easily accessed from the top of the page so users don't have to scroll to the bottom just to go from page to page.

will-madebymoon commented 5 years ago

@will-madebymoon So are suggesting that main navigation in services like SBR, R'Ops etc should be in the footer? I'm not sure. I'm on board with secondary links going down there but primary navigation needs to be easily accessed from the top of the page so users don't have to scroll to the bottom just to go from page to page.

In terms of a user need it's probably only RH and EQ that would require any mobile optimisation.

will-madebymoon commented 5 years ago

@will-madebymoon So are suggesting that main navigation in services like SBR, R'Ops etc should be in the footer? I'm not sure. I'm on board with secondary links going down there but primary navigation needs to be easily accessed from the top of the page so users don't have to scroll to the bottom just to go from page to page. In terms of a user need it's probably only RH and EQ that would require any mobile optimisation.

Though I see your point about the primary nav. Perhaps we retain the burger menu functionality for this however drop the icon and replace with the words Menu or something applicable.

RhodGriffith commented 5 years ago

@boxadesign Is the sign out button going in the footer for all services or will this be an option for services like EQ if there's no main nav?

will-madebymoon commented 5 years ago

@boxadesign Is the sign out button going in the footer for all services or will this be an option for services like EQ if there's no main nav?

Only on mobile for EQ

boxadesign commented 5 years ago

@boxadesign Is the sign out button going in the footer for all services or will this be an option for services like EQ if there's no main nav?

I think it's optional and this is just a pattern for eQ where there's no main navigation. We will still have the collapsible nav menu for main nav and any other required links.

boxadesign commented 5 years ago

@bameyrick I think this branch needs to retain the mobile nav (burger menu) but it might need tweaking. Do you want me to pick up that aspect?

bameyrick commented 5 years ago

@boxadesign If it's just changing the font sizes of the items within the menu I'm happy to do that. Regarding changing the button from an icon to the word "Menu", are you happy with us to just crack on and do that @will-madebymoon on or would you like to design something first? I was thinking of just using the ghost (white outline) button?

bameyrick commented 5 years ago

@boxadesign Everything you've done looks fine, there are a few changes I need to make before we can merge this so will leave the do not merge label on here

boxadesign commented 5 years ago

@bameyrick OK. I need to add unit tests for the mobile nav also.