1 files changed, 90 insertions, 80 deletions
diff --git a/dashboard/assets/components/SideBar.jsx b/dashboard/assets/components/SideBar.jsx
index ef077f1e0..c2e419ae9 100644
--- a/dashboard/assets/components/SideBar.jsx
+++ b/dashboard/assets/components/SideBar.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright 2017 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
@@ -15,92 +17,100 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {withStyles} from 'material-ui/styles';
-import Drawer from 'material-ui/Drawer';
-import {IconButton} from "material-ui";
-import List, {ListItem, ListItemText} from 'material-ui/List';
-import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 
-import {TAGS, DRAWER_WIDTH} from './Common.jsx';
+import withStyles from 'material-ui/styles/withStyles';
+import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
+import Icon from 'material-ui/Icon';
+import Transition from 'react-transition-group/Transition';
+import {Icon as FontAwesome} from 'react-fa';
+
+import {MENU, DURATION} from '../common';
 
-// Styles for the SideBar component.
-const styles = theme => ({
-    drawerPaper: {
-        position: 'relative',
-        height:   '100%',
-        width:    DRAWER_WIDTH,
-    },
-    drawerHeader: {
-        display:            'flex',
-        alignItems:         'center',
-        justifyContent:     'flex-end',
-        padding:            '0 8px',
-        ...theme.mixins.toolbar,
-        transitionDuration: {
-            enter: theme.transitions.duration.enteringScreen,
-            exit:  theme.transitions.duration.leavingScreen,
-        }
-    },
+// styles contains the constant styles of the component.
+const styles = {
+	menu: {
+		default: {
+			transition: `margin-left ${DURATION}ms`,
+		},
+		transition: {
+			entered: {marginLeft: -200},
+		},
+	},
+};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = theme => ({
+	list: {
+		background: theme.palette.background.appBar,
+	},
+	listItem: {
+		minWidth: theme.spacing.unit * 3,
+	},
+	icon: {
+		fontSize: theme.spacing.unit * 3,
+	},
 });
 
-// SideBar renders a sidebar component.
-class SideBar extends Component {
-    constructor(props) {
-        super(props);
+export type Props = {
+	classes: Object, // injected by withStyles()
+	opened: boolean,
+	changeContent: string => void,
+};
 
-        // clickOn contains onClick event functions for the menu items.
-        // Instantiate only once, and reuse the existing functions to prevent the creation of
-        // new function instances every time the render method is triggered.
-        this.clickOn = {};
-        for(let key in TAGS) {
-            const id = TAGS[key].id;
-            this.clickOn[id] = event => {
-                event.preventDefault();
-                console.log(event.target.key);
-                this.props.changeContent(id);
-            };
-        }
-    }
+// SideBar renders the sidebar of the dashboard.
+class SideBar extends Component<Props> {
+	shouldComponentUpdate(nextProps) {
+		return nextProps.opened !== this.props.opened;
+	}
 
-    render() {
-        // The classes property is injected by withStyles().
-        const {classes} = this.props;
+	// clickOn returns a click event handler function for the given menu item.
+	clickOn = menu => (event) => {
+		event.preventDefault();
+		this.props.changeContent(menu);
+	};
 
-        return (
-            <Drawer
-                type="persistent"
-                classes={{paper: classes.drawerPaper,}}
-                open={this.props.opened}
-            >
-                <div>
-                    <div className={classes.drawerHeader}>
-                        <IconButton onClick={this.props.close}>
-                            <ChevronLeftIcon />
-                        </IconButton>
-                    </div>
-                    <List>
-                        {
-                            Object.values(TAGS).map(tag => {
-                                return (
-                                    <ListItem button key={tag.id} onClick={this.clickOn[tag.id]}>
-                                        <ListItemText primary={tag.title} />
-                                    </ListItem>
-                                );
-                            })
-                        }
-                    </List>
-                </div>
-            </Drawer>
-        );
-    }
-}
+	// menuItems returns the menu items corresponding to the sidebar state.
+	menuItems = (transitionState) => {
+		const {classes} = this.props;
+		const children = [];
+		MENU.forEach((menu) => {
+			children.push((
+				<ListItem button key={menu.id} onClick={this.clickOn(menu.id)} className={classes.listItem}>
+					<ListItemIcon>
+						<Icon className={classes.icon}>
+							<FontAwesome name={menu.icon} />
+						</Icon>
+					</ListItemIcon>
+					<ListItemText
+						primary={menu.title}
+						style={{
+							...styles.menu.default,
+							...styles.menu.transition[transitionState],
+							padding: 0,
+						}}
+					/>
+				</ListItem>
+			));
+		});
+		return children;
+	};
 
-SideBar.propTypes = {
-    classes:       PropTypes.object.isRequired,
-    opened:        PropTypes.bool.isRequired,
-    close:         PropTypes.func.isRequired,
-    changeContent: PropTypes.func.isRequired,
-};
+	// menu renders the list of the menu items.
+	menu = (transitionState: Object) => (
+		<div className={this.props.classes.list}>
+			<List>
+				{this.menuItems(transitionState)}
+			</List>
+		</div>
+	);
+
+	render() {
+		return (
+			<Transition mountOnEnter in={this.props.opened} timeout={{enter: DURATION}}>
+				{this.menu}
+			</Transition>
+		);
+	}
+}
 
-export default withStyles(styles)(SideBar);
+export default withStyles(themeStyles)(SideBar);