import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
-import { Grid } from '@material-ui/core';
+import { Grid, Tooltip, IconButton } from '@material-ui/core';
import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
import { RootState } from 'store/store';
+import MenuIcon from "@material-ui/icons/Menu";
+import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
-const DRAWER_WITDH = 240;
+const DRAWER_WIDTH = 240;
type CssRules = 'root';
borderRight: `1px solid ${theme.palette.divider}`,
height: '100%',
overflowX: 'auto',
- width: DRAWER_WITDH,
+ width: DRAWER_WIDTH,
}
});
}
});
-const mapStateToProps = ({ router }: RootState) => ({
+const mapStateToProps = ({ router, sidePanel }: RootState) => ({
currentRoute: router.location ? router.location.pathname : '',
+ isCollapsed: sidePanel.collapsedState
});
export const SidePanel = withStyles(styles)(
connect(mapStateToProps, mapDispatchToProps)(
({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
<Grid item xs>
- <SidePanelButton key={props.currentRoute} />
- <SidePanelTree {...props} />
+ {props.isCollapsed ? <SidePanelToggle /> :
+ <>
+ <Grid style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap-reverse'}}>
+ <SidePanelButton key={props.currentRoute} />
+ <SidePanelToggle/>
+ </Grid>
+ <SidePanelTree {...props} />
+ </>}
</Grid>
));