Port over the Header component used across all sites

[winkerVSbecks]

No description provided.

[kylesuss]

LGTM. Good call bringing it over since it is being reused. I'm 👍 on pulling it in, assuming it fits w/ Dom's design thinking on how it will be used in the future.

[domyen]

navBreakpoint differs between projects.

What's the thinking behind 1.25 as the multiple? That would yield a breakpoint of 600px * 1.25 = 750px.

[winkerVSbecks]

It does differ. Seems to be based on how many links are in the header. Some have more and need to collapse at a wider width. I'll make 1*breakpoint the default. 1.25 was based on what one of the sites was using.

[winkerVSbecks]

And to confirm. You can change the value through a prop.

[domyen]

The breakpoint value or the multiple? I typically use the breakpoint from the design system and change the multiple when doing calculations. It's admittedly quite rough.

e.g.,

• 1 === 600px
• 1.25 === 750px
• 1.333 === 800px
• 1.5 === 900px

[winkerVSbecks]

The multiple. I spotted 1.25 and 1.33 on the other sites. Example usage:

<Header
    logo={<Logo />}
    navBreakpoint={breakpoint*1.33}
/>

[kylesuss]

To be honest, I've never quite understood why we use the multiple -- it feels a bit arbitrary when you implement it in a consumer app. I like the idea of defining common breakpoint sizes a bit more, but is there a benefit I am missing to this multiple strategy?

[winkerVSbecks]

That would be my preference too. I think the challenge is that those few breakpoints don't work for all the scenarios we have across multiple sites. Something to consider for the next refactor.

[kylesuss]

🚀 PR was released in v5.1.27 🚀