Add navigation option

[paulrobertlloyd]

Be nice to get a big feature into the 6.0 release, and was thinking the ability to add primary navigation items from the plugin config.

Unfortunately, it’s thrown up a few upstream issues with the prototype components:

Item padding

We’ve adjusted the spacing between items, and no longer have selected items bleed outside the confines of the container, however the items don’t line up with other content on the page, and have too much space between them:

Proposed solution

I think this can be resolved by removing the left and right padding from navigation items:

  .x-govuk-primary-navigation__item {
    box-sizing: border-box;
    display: block;
    float: left;
    line-height: 55px;
    height: 55px;
-   padding: 0 govuk-spacing(3);
    position: relative;
    margin-right: govuk-spacing(6)
  }

Masthead component is too opinionated

The masthead component has a top margin of -10px to account for the blue border below the header. However, this means if anything else appears before it, it gets partially obscured:

If you remove the top margin, and don’t have an adaptation to the header to add a full-width bottom border, you get this:

These components are all frustratingly dependent on each other in different ways.

Proposed solution

The negative margin seems like a code smell, so should probably be removed from the masthead component.

Then, in this plugin’s layouts, we need to programmatically decide when to add a header modifying class to give it a full border width.

[frankieroberto]

@paulrobertlloyd Makes sense to me.

I made a similar change to the primary navigation in a prototype, removing the padding and replacing it with a 20px margin on the right instead (was going to suggest this change in the prototype filters but forgot).

Agree with removing the negative margin from the masthead.

For the header, I wonder if we should have modifiers for both a full-width blue border (see code) and no blue border (for when you have a masthead underneath)?

[paulrobertlloyd]

Will add tests and documentation in a separate PR.