header.js presumes all councils want their mobile breakpoint to be 768px

[markconroy]

We assumed for some reason that all councils would use 768.

For custom themes, I think the easy thing for now is to duplicate the header.js, then use libraries-override to override the header-js library. But that's not scalable, and any council that does this will not get any updates that are added to header.js in the future.

We should try to make the breakbpoint value a variable, so we can use libraries extend instead of override. And then in our custom JS file, we'd just need something like

import { header } from localgovbase...

let breakpoint = 960

[tanc]

This would also extend to the CSS which is hard coded at 48rem currently. Instead a variable could be added and used whenever @media screen and (min-width: 48rem) is used

[andybroomfield]

Could you expose it to drupalSettings and pull it from there?

[markconroy]

We can't use variables in CSS media queries yet. I think I'd be happy if we got a variable working in the JS, which default to 768 so we don't break existing sites with the update.

Then if anyone wants to override it, they can figure out that they'll need to update some CSS as well. They already need to do this if they override the header.js so we're not adding any extra work.