<Header.MenuToggle/> and <Header.ServiceName> don't display as expected on mobile.

[charlesomer]

I'm trying to implement a service name with the menu toggle feature in a banner but at the moment the service name does not disappear or move out of the way of the menu button on smaller screens - causing an overlap.

Unless the following is incorrect, if so please let me know!

<Header.Container>
    <Link to="/"><Header.Logo/></Link>
    <Header.ServiceName>Long Service Name</Header.ServiceName>
    <Header.Content>
        <Header.MenuToggle/>
    </Header.Content>
</Header.Container>

Thank you
Charles

[charlesomer]

It appears this type of layout isn't listed as an example in the NHS service manual either despite it being used for the service manual website itself :/

Looking at the HTML for the service manual then, it appears the Header.ServiceName is actually a child of the header logo which is kind of weird given the examples?

[charlesomer]

Looking at the NHSLogo source code, it looks like it might be doing this already - not sure why this isn't the case yet

[charlesomer]

Okay so I think this produces similar html as the service manual website itself, except it doesn't display correctly on larger screens this time. I think having both of these options for serviceName is confusing :/

<Header
  transactional
  serviceName="Genetic Test Sharing"
>

[charlesomer]

Figured it out!

Having transactional as a prop for <Header> causes the serviceName to display weirdly - removing it fixed it for me. This should all be documented somewhere probably to make users aware :)

[Tomdango]

Hi Charles - would it be possible to get your full code for the Header? I'd like to reproduce this locally if possible :)
Also, the Header.Logo component is a div with an anchor nested inside, which might be causing some of your layout issues with the React Router <Link /> component. The resulting HTML would look like this:

<a href="/">
  <div class="nhsuk-header__logo">
    <a class="nhsuk-header__link">
       // NHS Logo SVG
    </a>
  </div>
</a>

This means that the anchors would be nested, and the styles might not be properly applied from the Header component. An alternative would be to use the history object instead, for example...

import { useHistory } from "react-router-dom";

const HeaderComponent = () => {
    const history = useHistory();

    return (
        <Header>
          <Header.Container>
            <Header.Logo onClick={() => history.push("/")} />
          </Header.Container>
        </Header>
    );
}

Here's the docs for the hook and another for a higher-order component that can also be used. If you choose that approach instead, just make sure that you are able to use the keyboard to navigate and use that link too so that it remains accessible.

[charlesomer]

Okay so I'm not using react-router at the moment which would have caused the nested <a> tags, instead I'm using wouter which modifies a child <a> tag if one is present - https://github.com/molefrog/wouter#link-hrefpath- . I've actually created a custom Link component for this project which looks like this if that's helpful?

import React from 'react'
import { Link as WouterLink, useRoute } from "wouter";

import "./styles.scss"

const Link = props => {
  const [isActive] = useRoute(props.to);

  if (React.isValidElement(props.children)) {
    return (
      <WouterLink {...props}>
        {
          React.cloneElement(
            props.children,
            {
              className: isActive ? "link-active" : "",
              "aria-current": isActive ? "page" : undefined
            }
          )
        }
      </WouterLink>
    );
  } else {
    return <WouterLink {...props}>{props.children}</WouterLink>
  }  
};

export default Link;

With the following scss to replicate the service manual website.

.link-active {
    pointer-events: none;

    a { 
        box-shadow: inset 0 -4px 0 #d8dde0;
    }
}

I should have realised about the history.push("/") but I quite like the way wouter is working at the moment so I think I'll stick with that for now.

To replicate the issues I was having with the header, the following two examples should be enough to replicate it :)

This causes issues on smaller screens (non-dependent on transactional) with the menu button, it also appears to format the text size of ServiceName incorrectly compared to the working solution if transactional is not included.

import { Header } from 'nhsuk-react-components';

function AppHeader(props) {
  return (
    <Header>
      <Header.Container>
        <Header.Logo aria-label='Title Title Title' />
        <Header.ServiceName>Title Title Title</Header.ServiceName>
        <Header.Content>
          <Header.MenuToggle/>
        </Header.Content>
      </Header.Container>
        <Header.Nav>
          <Header.NavItem>Page1</Header.NavItem>
          <Header.NavItem>Page2</Header.NavItem>
          <Header.NavItem>Page3</Header.NavItem>
        </Header.Nav>
    </Header>
  );
}

export default AppHeader;

This example causes issues on larger screens due to the transactional part.

import { Header } from 'nhsuk-react-components';

function AppHeader(props) {
  return (
    <Header
      transactional
      serviceName="Title Title Title"
    >
      <Header.Container>
        <Header.Logo aria-label='Title Title Title' />
        <Header.Content>
          <Header.MenuToggle/>
        </Header.Content>
      </Header.Container>
        <Header.Nav>
          <Header.NavItem>Page1</Header.NavItem>
          <Header.NavItem>Page2</Header.NavItem>
          <Header.NavItem>Page3</Header.NavItem>
        </Header.Nav>
    </Header>
  );
}

export default AppHeader;

Let me know if that doesn't work though :)

This is a working example, I also noticed that aria-label wasn't updated automatically for the Logo so I had to set that manually.

import { Header } from 'nhsuk-react-components';

function AppHeader(props) {
  return (
    <Header serviceName="Title Title Title">
      <Header.Container>
        <Header.Logo aria-label='Title Title Title' />
        <Header.Content>
          <Header.MenuToggle/>
        </Header.Content>
      </Header.Container>
        <Header.Nav>
          <Header.NavItem>Page1</Header.NavItem>
          <Header.NavItem>Page2</Header.NavItem>
          <Header.NavItem>Page3</Header.NavItem>
        </Header.Nav>
    </Header>
  );
}

export default AppHeader;

[colinrotherham]

I'm going to close this as it looks like the header was since fixed

The new header with account information from NHS.UK frontend v10.0.0 will be added in #267