[FEATURE] Sync sticky header behaviour with the Bootstrap Italia one

[dej611]

The sticky header behaviour has been recently merged into this UI Kit with #463 .

Describe the solution you'd like In the reference UI Kit there's some DOM manipulation when the sticky behaviour kicks in, for instance in the full width scenario the logo gets removed from the Slim Header and passed to the Central one. Also, the documentation in the UI Kit is not clear about the behaviour when there's a partial header and not a complete: on this component version of the UI Kit we need to be very clear on the documentation how it works and what to avoid.

Some examples here:

Additional context Sticky Header on Bootstrap Italia documentation: https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/header/#header-sticky Sticky Header example: https://italia.github.io/bootstrap-italia/docs/esempi/template-comuni-vuoto/

[ankushbhardwxj]

@dej611 How do you intend to make the page responsive? Using media-queries in CSS / using media-query in React. I'm thinking of using a library for the media queries and render required manipulated sticky header for respective media query. We can use something like this : https://www.npmjs.com/package/react-responsive

[dej611]

I would try first to use only the BI media queries: they are already in place and the React component here should adapt to use it. As for what it should change, this is the vanilla version of the sticky behaviour in BI: https://github.com/italia/bootstrap-italia/blob/master/src/js/plugins/sticky-header.js

Three elements change place when in sticky mode and scrolled: brand, search and user. I am not sure it is worth investing time to "move" elements here, so probably alternative solutions may be worth investigating.

[ashu8912]

Working On This @dej611

[ankushbhardwxj]

@ashu8912 before you start implementing, please discuss it here so that community members can give suggestions. Thanks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. Please read https://github.com/italia/design-react-kit/discussions/886.