Expose header navigation open/close state (with setter)

[charlesomer]

I'm not sure if I'm missing something obvious here (if I am, please point it out), I've been trying to close the menu (if it's open) if the route changes within my app. Since the HeaderContext provider doesn't cover my own components, I seem only to be able to access the menuOpen property and not use toggleMenu or setMenuToggle.

I believe this is a limitation of the context api in general - not being able to set a context that's not provided (although it seems odd to me that I can view things like menuOpen still).

Am I missing an obvious prop I can use/set with the header component that allows me to set the menuOpen state? If not, what would be the best way to achieve this currently?

Thank you
Charles

[Tomdango]

Sorry for the slow response to this! There isn't currently a prop that allows you to manipulate the menuOpen state, apart from using the toggleMenu function from the context, though the context is designed to be internal rather than to be manipulated externally.

Would it be useful to have a menuOpen prop passed to the base Header element? This would be the "forced" value of opening the menu, and will get passed down to all of the children in the internal context.

Let me know what you think!

[charlesomer]

Hmm I'm not sure, I guess it would then be possible to check for route changes where the Header component is used in an application and manipulate menuOpen that way? I'm just trying to think of the best way to do this as it would be best (I think) if the menu collapsed if a link is clicked outside of the header too. For example, if a user opens the menu and then clicks on a link on the page they are currently on (not the menu links), the menu should then disappear. Does that make sense and would that be possible using the way suggested above? Thank you for your help! 😄

[Tomdango]

It should be - the best way I would do it is to have some context up at the root level of your app that holds the menuOpen state, with a couple of setter methods to change that value. Then you could combine that with an event listener that looks for changes in the pathname so that you can automatically set that value when you navigate, which might be easier than adding it onto every link! Or you could even write a little custom hook that closes the menu when the view is unmounted, something like:

const useCloseMenu = () => {
    const { closeNav } = useContext(RootLevelContext);
    useEffect(() => () => closeNav(), []);
}

Returning another function from the useEffect callback, with an empty dependency array works the same in practice as the componentWillUnmount function.

[colinrotherham]

This is closed by #267

The context helper toggleMenu was replaced by setMenuOpen alongside a new open prop:

- <Header.Navigation>
+ <Header.Navigation open>
    <Header.NavigationItem href="#">Example 1</Header.NavigationItem>
    <Header.NavigationItem href="#">Example 2</Header.NavigationItem>
    <Header.NavigationItem href="#">Example 3</Header.NavigationItem>
    <Header.NavigationItem href="#">Example 4</Header.NavigationItem>
  </Header.Navigation>

Bear in mind that NHS.UK frontend handles the open/close toggle behaviour, e.g. it will automatically close when the viewport width increases and menu items no longer need to overflow

But if this happens the menuOpen context will still be updated