@flive/react-modal-menu

react-modal-menu

This module display a navigation menu that appears as an overlay, it extend react-kit Modal.

Install

npm install @flive/react-modal-menu

Code example

 Simple example with navigationLinks, navigation tree as a json for generating accordions.

<ModalMenu
  title="Menu"
  onChange={({ state }) => console.log({ state })}
  toggle={
    <Button variant="secondary" type="button">
      Simple example
    </Button>
  }
  userProfile={{
    avatarIdentifier: '[e-mail]',
    content: 'First name, Last name',
    linkComponent: 'a'
  }}
  navigationLinks={[
    {
      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

<ModalMenu
  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>
  )}
</ModalMenu>

Licence

This project is licensed under the MIT License - see the LICENSE file for details.