//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { SidePanelTree, SidePanelTreeProps } from '~/views-components/side-panel-tree/side-panel-tree';
-import { compose, Dispatch } from 'redux';
+import { ArvadosTheme } from 'common/custom-theme';
+import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-tree/side-panel-tree';
+import { Dispatch } from 'redux';
import { connect } from 'react-redux';
-import { navigateFromSidePanel } from '../../store/side-panel/side-panel-action';
+import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
+import { Grid } from '@material-ui/core';
+import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
+import { RootState } from 'store/store';
const DRAWER_WITDH = 240;
-type CssRules = 'drawerPaper' | 'toolbar';
+type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- drawerPaper: {
- position: 'relative',
+ root: {
+ background: theme.palette.background.paper,
+ borderRight: `1px solid ${theme.palette.divider}`,
+ height: '100%',
+ overflowX: 'auto',
width: DRAWER_WITDH,
- display: 'flex',
- flexDirection: 'column',
- paddingTop: 58,
- overflow: 'auto',
- },
- toolbar: theme.mixins.toolbar
+ }
});
const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
}
});
-export const SidePanel = compose(
- withStyles(styles),
- connect(undefined, mapDispatchToProps)
-)(({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps) =>
- <Drawer
- variant="permanent"
- classes={{ paper: classes.drawerPaper }}>
- <div className={classes.toolbar} />
- <SidePanelTree {...props} />
- </Drawer>);
+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>
+ ));