-export const SidePanel = compose(
- withStyles(styles),
- connect(undefined, mapDispatchToProps)
-)(({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps) =>
- <Grid item xs>
- <SidePanelButton />
- <SidePanelTree {...props} />
- </Grid>);
\ No newline at end of file
+const mapStateToProps = ({ router }: RootState) => ({
+ currentRoute: router.location ? router.location.pathname : '',
+});
+
+export const SidePanel = withStyles(styles)(
+ connect(mapStateToProps, mapDispatchToProps)(
+ ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
+ <Grid item xs>
+ <SidePanelButton key={props.currentRoute} />
+ <SidePanelTree {...props} />
+ </Grid>
+ ));
+
+type collapseButtonIconProps = {
+ sidePanelIsCollapsed: boolean;
+ toggleSidePanel: (collapsedState: boolean) => void
+}
+
+const collapseButtonIconStyles = {
+ menuIcon: {
+ height: '4rem',
+ width: '4rem',
+ paddingBottom: '0.25rem'
+ }
+}
+
+export const CollapseLeftPanelTrigger = (props: collapseButtonIconProps) =>{
+ return <Tooltip disableFocusListener title="Toggle Side Panel">
+ <IconButton onClick={()=>{props.toggleSidePanel(props.sidePanelIsCollapsed)}}>
+ <MenuIcon style={collapseButtonIconStyles.menuIcon} aria-label="Toggle Side Panel" />
+ </IconButton>
+ </Tooltip>
+ };
\ No newline at end of file