Reusable header component
The header component comes with two variants (wide and centered) that are very common in web applications. You can also customize weather the header should be sticky or not easily.
You have full control over the items layout displayed on the mobile and desktop verisons of the header. Which makes it easy to customize the header to fit your needs.
Demo
Props
| Prop | Type | Default |
|---|---|---|
variant | default | centered | default |
sticky | boolean | false |
Logo | ReactNode | - |
desktopItems | ReactNode | - |
mobileItems | ({ setIsOpen }: { setIsOpen: (open: boolean) => void }) => ReactNode | ReactNode | - |