From f38a33fd4a99dc2d04687609b703c74819fa3ab5 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Mon, 31 Aug 2020 12:35:33 +0200
Subject: [PATCH] URL dependent labeling of the toolbar

---
 src/components/Navbar.js                | 20 +++++++++++++++-----
 src/components/Routes.js                |  4 ++++
 src/components/Tutorial/Tutorial.js     | 14 ++++++++++++++
 src/components/Tutorial/TutorialHome.js | 11 +++++++++++
 4 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Tutorial/Tutorial.js
 create mode 100644 src/components/Tutorial/TutorialHome.js

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index cd6ebf7..7b20303 100644
--- a/src/components/Navbar.js
+++ b/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) => (
-              <ListItem button key={index} onClick={this.toggleDrawer}>
-                <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
-                <ListItemText primary={item.text} />
-              </ListItem>
+              <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));
diff --git a/src/components/Routes.js b/src/components/Routes.js
index f1c42c4..b81bf51 100644
--- a/src/components/Routes.js
+++ b/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>
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
new file mode 100644
index 0000000..15ea3a0
--- /dev/null
+++ b/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);
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
new file mode 100644
index 0000000..ade1cc1
--- /dev/null
+++ b/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;