folding-side-menu

Side menu that expand on mouse over.

Install

npm install folding-side-menu
yarn add folding-side-menu

Usage

Here's an example of basic usage:

import React from 'react'
import PaperLabeled from 'folding-side-menu'

function MyApp() {
  const menuItems: MenuItem[] = [
    {
        text: 'Main',
        path: '/Settings',
        icon: <HomeIcon data-testid="homeIcon" fontSize="large" />,
    },
    {
        text: 'Reports',
        path: '/Settings',
        icon: <ReportIcon fontSize="large" />,
    },
    {
        text: 'Settings',
        path: '/Settings',
        icon: <SettingsIcon fontSize="large" />,
    },
  ]

  return (
    <SideMenu menuItems={menuItems} />
  );
}

Example of ussage integrated wit react-router-doom

import React from 'react'
import PaperLabeled from 'folding-side-menu'
import { Link } from 'react-router-dom'

function MyApp() {
  
  const menuItems: MenuItem[] = [
    {
        text: 'Main',
        icon: <HomeIcon fontSize="large" />,
        rootingElement: ({ children }: {children: React.ReactElement}) => (
            <Link className={classes.linkText} to="/">
                {children}
            </Link>
        ),
    },
    {
        text: 'Reports',
        icon: <ReportIcon fontSize="large" />,
        rootingElement: ({ children }: {children: React.ReactElement}) => (
            <Link className={classes.linkText} to="/Report">
                {children}
            </Link>
        ),
    },
    {
        text: 'Settings',
        icon: <SettingsIcon fontSize="large" />,
        rootingElement: ({ children }: {children: React.ReactElement}) => (
            <Link className={classes.linkText} to="/Settings">
                {children}
            </Link>
        ),
    },
  ]

  return (
    <SideMenu menuItems={menuItems} />
    <div className={classes.content}>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/Report" component={Report} />
            <Route exact path="/Settings" component={Settings} />
        </Switch>
    </div>
  );
}

User guide

PaperLabeled

Displays a side menu that collapse and expand when mouse over

props

Prop name	Type	Description	Default value
menuItems	MenuItem[]	List of items in the menu	[]
openMenuCSS	CSSProperties	CSS props of the menu when is open.	undefined
closeMenuCSS	CSSProperties	CSS props of the menu when is closed.	undefined
menuItemCSS	CSSProperties	CSS props of the menu items.	undefined
topMarginItems	number?	margin-top of the list of items.	undefined

type MenuItem = {
    text: string,
    path?: string,
    icon?: React.ReactElement,
    rootingElement?: ({ children }: {children: React.ReactElement}) => React.ReactElement
}