-export const SidePanel = compose(
- withStyles(styles),
- connect(undefined, mapDispatchToProps)
-)(({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps) =>
- <div className={classes.root}>
- <SidePanelTree {...props} />
- </div>);
+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>
+ {props.isCollapsed ?
+ <>
+ <SidePanelToggle />
+ <SidePanelCollapsed />
+ </>
+ :
+ <>
+ <Grid className={classes.topButtonContainer}>
+ <SidePanelButton key={props.currentRoute} />
+ <SidePanelToggle/>
+ </Grid>
+ <SidePanelTree {...props} />
+ </>}
+ </Grid>
+ ));