The basics, with a subtle animation.
In terms of structure, our Header component is designed to provide the developer with a nice, simple starting point that covers most use cases.
It has the ability to contain:
A logo.
A navigation menu.
A CTA (if provided).
A NavDrawerTrigger component (if the user is on a mobile device).
There are two things to make a mental note of when referencing or working in this file:
We have chosen to use the framer-motion package to add a subtle top slide-in/out effect based on the user's scroll direction.
This logic, along with a few other values calculated from scroll and toggle direction, are housed in useStickyHeader.
For a more in-depth look at this custom hook, check out our hooks documentation.
These tokens, stored in the tokens/magicNumbers directory, are simply that - values we use to determine the height and offset of the header.
This gives us one place to change the values, should we need to.
These tokens are also used in the HeaderBackground component, so if you do change which token is being used in Header, make sure to do it there as well.