import * as React from 'react' ; import { IconButton , Tooltip } from '@material-ui/core' ; import { makeStyles } from '@material-ui/core/styles' ; import MenuIcon from '@material-ui/icons/Menu' ; import { useTranslate } from 'ra-core' ; import { ClassesOverride } from '../types' ; import { useToggleSidebar } from './useToggleSidebar' ; param props param { String } props . className param { ClassesOverride < typeof useStyles > } props . classes export const SidebarToggleButton = ( props ) => { const translate = useTranslate ( ) ; const classes = useStyles ( props ) ; const { className } = props ; const [ open , toggleSidebar ] = useToggleSidebar ( ) ; return ( < Tooltip title = { translate ( open ? 'ra.action.close_menu' : 'ra.action.open_menu' , { _ : 'Open/Close menu' , } ) } enterDelay = { 500 } > < IconButton color = "inherit" onClick = { ( ) => toggleSidebar ( ) } className = { className } > < MenuIcon classes = { { root : open ? classes . menuButtonIconOpen : classes . menuButtonIconClosed , } } /> < /IconButton> < /Tooltip>); } ; const useStyles = makeStyles ( theme => ( { menuButtonIconClosed : { transition : theme . transitions . create ( [ 'transform' ] , { easing : theme . transitions . easing . sharp , duration : theme . transitions . duration . leavingScreen , } ) , transform : 'rotate(0deg)' , } , menuButtonIconOpen : { transition : theme . transitions . create ( [ 'transform' ] , { easing : theme . transitions . easing . sharp , duration : theme . transitions . duration . leavingScreen , } ) , transform : 'rotate(180deg)' , } , } ) , { name : 'RaSidebarToggleButton' } ) ; export type SidebarToggleButtonProps = { className ? : string ; classes ? : ClassesOverride < typeof useStyles > ; } ;