URL dependent labeling of the toolbar

src/components/Navbar.js

@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import ClearWorkspace from './ClearWorkspace';
 import senseboxLogo from './sensebox_logo.svg';
 
+import { withRouter } from 'react-router-dom';
+
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -68,6 +70,12 @@ class Navbar extends Component {
             <Link to={"/"} style={{marginLeft: '10px'}}>
               <img src={senseboxLogo} alt="senseBox-Logo" width="30"/>
             </Link>
+            {/^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname) ?
+              <Link to={"/tutorial"} style={{textDecoration: 'none', color: 'inherit', marginLeft: '10px'}}>
+                <Typography variant="h6" noWrap>
+                  Tutorial
+                </Typography>
+              </Link> : null}
           </Toolbar>
         </AppBar>
         <Drawer
@@ -90,10 +98,12 @@ class Navbar extends Component {
           </div>
           <List>
             {[{text: 'Tutorials', icon: faChalkboardTeacher}, {text: 'Einstellungen', icon: faCog}].map((item, index) => (
+              <Link to={"/tutorial"} style={{textDecoration: 'none', color: 'inherit'}}>
                 <ListItem button key={index} onClick={this.toggleDrawer}>
                   <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
                   <ListItemText primary={item.text} />
                 </ListItem>
+              </Link>
             ))}
             <ClearWorkspace onClick={this.toggleDrawer}/>
           </List>
@@ -112,4 +122,4 @@ class Navbar extends Component {
   }
 }
 
-export default withStyles(styles, {withTheme: true})(Navbar);
+export default withStyles(styles, {withTheme: true})(withRouter(Navbar));

src/components/Routes.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
+import Tutorial from './Tutorial/Tutorial';
+import TutorialHome from './Tutorial/TutorialHome';
 import NotFound from './NotFound';
 
 class Routes extends Component {
@@ -12,6 +14,8 @@ class Routes extends Component {
       <div style={{ margin: '0 22px' }}>
         <Switch>
           <Route path="/" exact component={Home} />
+          <Route path="/tutorial" exact component={TutorialHome} />
+          <Route path="/tutorial/:tutorialId" exact component={Tutorial} />
           <Route component={NotFound} />
         </Switch>
       </div>

src/components/Tutorial/Tutorial.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+import { withRouter } from 'react-router-dom';
+
+class Tutorial extends Component {
+  render() {
+    console.log(this.props);
+    return (
+      <h1>Tutorial {this.props.match.params.tutorialId}</h1>
+    );
+  };
+}
+
+export default withRouter(Tutorial);

src/components/Tutorial/TutorialHome.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class TutorialHome extends Component {
+  render() {
+    return (
+      <h1>Tutorial Home</h1>
+    );
+  };
+}
+
+export default TutorialHome;