@flive/react-navigation-drawer
v5.1.1
Published
Navigation drawer displayed in overlay
Downloads
31
Readme
react-navigation-drawer
This module displays a navigation drawer that appears as an overlay, it extend react-kit Modal
.
Install
npm install @flive/react-navigation-drawer
Code example
Simple example with menuLinks
, navigation tree as a json for generating accordions.
<NavigationDrawer
title="Menu"
onChange={({ state }) => console.log({ state })}
toggle={
<Button variant="secondary" type="button">
Simple example
</Button>
}
userProfile={{
avatarIdentifier: '[email protected]',
content: 'First name, Last name',
linkComponent: 'a'
}}
menuLinks={[
{
label: 'Link label 1',
key: 'link1',
children: [
{ label: 'Link label 2', key: 'link2', linkComponent: 'a' },
{ label: 'Link label 3', key: 'link3' }
]
},
{
label: 'Link label 2',
key: 'link2',
children: [
{ label: 'Link label 2', key: 'link2' },
{
label: 'Link label 3',
key: 'link3',
children: [{ label: 'Link label 4', key: 'link4' }]
}
]
},
{ label: 'Link label 3', key: 'link3' },
{ label: 'Link label 4', key: 'link4' }
]}
/>
Custom example with a child as function
<NavigationDrawer
title="Menu"
onChange={({ state }) => console.log({ state })}
toggle={
<Button variant="secondary" type="button">
Custom render
</Button>
}
userProfile={{
avatarImgSource:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
content: 'Helena Brauer'
}}
>
{({ handleClose }) => (
<Accordion margin="none" boxShadow="none">
<AccordionItem label="Level 1 label">
<Accordion>
<AccordionLink onClick={handleClose}>Accordion link 1</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 2</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 3</AccordionLink>
<AccordionItem label="Level 2 label">
<Accordion>
<AccordionLink onClick={handleClose}>
Accordion link 4
</AccordionLink>
<AccordionLink onClick={handleClose}>
Accordion link 5
</AccordionLink>
<AccordionLink onClick={handleClose}>
Accordion link 6
</AccordionLink>
<AccordionItem label="Level 3 label">
<AccordionLink onClick={handleClose}>
Accordion link 6
</AccordionLink>
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
</AccordionItem>
<AccordionLink onClick={handleClose}>Accordion link 2</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 3</AccordionLink>
</Accordion>
)}
</NavigationDrawer>
License
This project is licensed under a custom license. See the LICENSE file for details.