react-scepter-hamburger-menu
Hamburger menu component for use with the scepter navigation HOC
Installation
npm install @source4society/react-scepter-hamburger-menu
or
yarn install @source4society/react-scepter-hamburger-menu
Usage
This component is intended to be used with react-scepter-navigation-hoc and react-scepter-navigation-menu. Decorating a component will allow it to become a toggle for the navigation menu component via the navigation manager by linking the three together via the reducerKey prop.
Example
First add the manager from react-scepter-navigation-hoc somewhere to your app, such as the Shell.
<NavigationManager reducerKey={'exampleKey'} />
Add a hamburger menu button and decorate it with this component
<HamburgerMenu reducerKey={'exampleKey'}>
<span className={'hamburger-icon'}></span>
</HamburgerMenu>
Then add the Navigation component from react-scepter-navigation-menu to the page somewhere.
<NavigationMenu reducerKey={'exampleKey'} />
Clicking on the hamburger icon will cause the navigation menu state for the 'exampleKey' navigation to be toggled according to the states defined in react-scepter-navigation-hoc.
The prop onClick has been changed to onInteraction for the purpose of supporting SCEPTER universal UI components.