import * as React from 'react' ; import { useState } from 'react' ; import { useSelector } from 'react-redux' ; import LabelIcon from '@material-ui/icons/Label' ; import { makeStyles } from '@material-ui/core/styles' ; import classnames from 'classnames' ; import { useTranslate , DashboardMenuItem , MenuItemLink , MenuProps , ReduxState , } from 'react-admin' ; import visitors from '../visitors' ; import orders from '../orders' ; import invoices from '../invoices' ; import products from '../products' ; import categories from '../categories' ; import reviews from '../reviews' ; import SubMenu from './SubMenu' ; import { AppState } from '../types' ; type MenuName = 'menuCatalog' | 'menuSales' | 'menuCustomers' ; const Menu = ( { dense = false } ) => { const [ state , setState ] = useState ( { menuCatalog : true , menuSales : true , menuCustomers : true , } ) ; const translate = useTranslate ( ) ; const open = useSelector ( ( state ) => state . admin . ui . sidebarOpen ) ; useSelector ( ( state ) => state . theme ) ; const classes = useStyles ( ) ; const handleToggle = ( menu ) => { setState ( state => ( { ... state , [ menu ] : ! state [ menu ] } ) ) ; } ; return ( < div className = { classnames ( classes . root , { [ classes . open ] : open , [ classes . closed ] : ! open , } ) } > { ' ' } < DashboardMenuItem / > < SubMenu handleToggle = { ( ) => handleToggle ( 'menuSales' ) } isOpen = { state . menuSales } name = "pos.menu.sales" icon = { < orders . icon / > } dense = { dense } > < MenuItemLink to = { { pathname : '/commands' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.commands.name` , { smart_count : 2 , } ) } leftIcon = { < orders . icon / > } dense = { dense } / > < MenuItemLink to = { { pathname : '/invoices' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.invoices.name` , { smart_count : 2 , } ) } leftIcon = { < invoices . icon / > } dense = { dense } / > < /SubMenu> < SubMenu handleToggle = { ( ) => handleToggle ( 'menuCatalog' ) } isOpen = { state . menuCatalog } name = "pos.menu.catalog" icon = { < products . icon / > } dense = { dense } > < MenuItemLink to = { { pathname : '/products' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.products.name` , { smart_count : 2 , } ) } leftIcon = { < products . icon / > } dense = { dense } / > < MenuItemLink to = { { pathname : '/categories' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.categories.name` , { smart_count : 2 , } ) } leftIcon = { < categories . icon / > } dense = { dense } / > < /SubMenu> < SubMenu handleToggle = { ( ) => handleToggle ( 'menuCustomers' ) } isOpen = { state . menuCustomers } name = "pos.menu.customers" icon = { < visitors . icon / > } dense = { dense } > < MenuItemLink to = { { pathname : '/customers' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.customers.name` , { smart_count : 2 , } ) } leftIcon = { < visitors . icon / > } dense = { dense } / > < MenuItemLink to = { { pathname : '/segments' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.segments.name` , { smart_count : 2 , } ) } leftIcon = { < LabelIcon / > } dense = { dense } / > < /SubMenu> < MenuItemLink to = { { pathname : '/reviews' , state : { _scrollToTop : true } , } } primaryText = { translate ( `resources.reviews.name` , { smart_count : 2 , } ) } leftIcon = { < reviews . icon / > } dense = { dense } / > < /div>); } ; const useStyles = makeStyles ( theme => ( { root : { marginTop : theme . spacing ( 1 ) , marginBottom : theme . spacing ( 1 ) , transition : theme . transitions . create ( 'width' , { easing : theme . transitions . easing . sharp , duration : theme . transitions . duration . leavingScreen , } ) , } , open : { width : 200 , } , closed : { width : 55 , } , } ) ) ; export default Menu ;