react-solid-sidebar

A React Solid Sidebar Widget.

Demo Page

https://kichiemon.github.io/menu-a

Install

npm

npm install --save react-solid-sidebar

yarn

yarn add react-solid-sidebar

Props

|name|type|description|required| |:---:|:---:|:----:|:----:| |title|strinig|title in the menu|required| |menuItems| ListMenuItem[] | menu list |required| |actionButton|JSX.Element|right or bottom button |required|

Example Usage

import React from 'react'
import SolidSidebarLayout, { SolidSidebarMenuItem } from 'react-solid-sidebar'
import { Button, Box, Typography } from '@material-ui/core'
import Business from '@material-ui/icons/Business'
import Person from '@material-ui/icons/Person'
import { Redirect, Route, withRouter } from 'react-router'

const MenuA: React.FunctionComponent<{}> = () => {
  return (
    <Box component='body'>
      <Typography variant='h2'>メニューA</Typography>
    </Box>
  )
}
const MenuB: React.FunctionComponent<{}> = () => {
  return (
    <Box component='body'>
      <Typography variant='h2'>メニューA</Typography>
    </Box>
  )
}

const App = (props: any) => {
  const handleClick = () => console.log('button clicked!')
  const menuItems: SolidSidebarMenuItem[] = [
    {
      name: 'Menu A',
      icon: <Business />,
      goTo: () => props.history.push('/menu-a'),
      isSelected: () => window.location.pathname === '/menu-a'
    },
    {
      name: 'Menu B',
      icon: <Person />,
      goTo: () => props.history.push('/menu-b'),
      isSelected: () => window.location.pathname === '/menu-b'
    }
  ]
  const ActionButton = <Button onClick={handleClick}></Button>

  return (
    <SolidSidebarLayout
      title='DEMO Page'
      menuItems={menuItems}
      actionButton={ActionButton}
    >
      <Route exact path='/menu-a' component={MenuA} />
      <Route exact path='/menu-b' component={MenuB} />
      <Route exact path='/' render={() => <Redirect to='menu-a' />} />
    </SolidSidebarLayout>
  )
}

export default withRouter(App)

License

MIT © kichiemon