Navigable Sidebar links!! 🚀

See mui/material-ui#1534
RUGSoftEng · Mar 29, 2018 · 1e59cc9 · 1e59cc9
1 parent e8d3558
commit 1e59cc9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/pydash-front/src/App.js b/pydash-front/src/App.js
@@ -2,17 +2,16 @@ import React, { Component } from 'react';
 import './App.css';
 import Login from './login/Login';
 import Dashboard from './app/dashboard/Dashboard';
-import Overview from './app/overview/Overview';
 import { Switch, Route } from 'react-router-dom'
 
 class App extends Component {
  render() {
  return (
  <div className="App">
  <Switch>
+ {/* `exact` because its only one slash */}
  <Route exact path='/' component={Login} />
- <Route exact path='/dashboard' component={Dashboard} />
- <Route path='/overview' component={Overview} />
+ <Route path='/dashboard' component={Dashboard} />
  </Switch>
  </div>
  );

diff --git a/pydash-front/src/app/dashboard/Dashboard.js b/pydash-front/src/app/dashboard/Dashboard.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { Route } from 'react-router-dom'
 import PropTypes from 'prop-types';
+
+// material-ui
 import { withStyles } from 'material-ui/styles';
 import Drawer from 'material-ui/Drawer';
 import AppBar from 'material-ui/AppBar';
@@ -10,7 +13,11 @@ import IconButton from 'material-ui/IconButton';
 import Hidden from 'material-ui/Hidden';
 import Divider from 'material-ui/Divider';
 import MenuIcon from 'material-ui-icons/Menu';
+
+// APP
 import { mailFolderListItems, otherMailFolderListItems } from './Sidebar';
+import Overview from '../overview/Overview';
+import Statistics from '../statistics/Statistics';
 
 const drawerWidth = 240;
 
@@ -119,7 +126,8 @@ class ResponsiveDrawer extends React.Component {
  </Hidden>
  <main className={classes.content}>
  <div className={classes.toolbar} />
- <Typography noWrap>{'You haven\'t added any fancy dashboard yet ✌🏻.'}</Typography>
+ <Route exact path='/dashboard' component={Overview} />
+ <Route path='/dashboard/statistics' component={Statistics} />
  </main>
  </div>
  );

diff --git a/pydash-front/src/app/dashboard/Sidebar.js b/pydash-front/src/app/dashboard/Sidebar.js
@@ -1,12 +1,22 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom'
+
 import { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
 import DonutSmall from 'material-ui-icons/DonutSmall';
+import HomeIcon from 'material-ui-icons/Home';
 import StarIcon from 'material-ui-icons/Star';
+
 import Logout from './Logout'
 
 export const mailFolderListItems = (
  <div>
- <ListItem button>
+ <ListItem button component={NavLink} to={'/dashboard/'}>
+ <ListItemIcon>
+ <HomeIcon />
+ </ListItemIcon>
+ <ListItemText primary="Overview" />
+ </ListItem>
+ <ListItem button component={NavLink} to={'/dashboard/statistics'}>
  <ListItemIcon>
  <DonutSmall />
  </ListItemIcon>

diff --git a/pydash-front/src/app/statistics/Statistics.js b/pydash-front/src/app/statistics/Statistics.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class Statistics extends Component {
+ render() {
+ return (
+ <p>Nothing here yet 😎</p>
+ );
+ }
+}
+
+export default Statistics;