initial layout

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,7 @@
-.App {
+.wrapper {
-  text-align: center;
+  min-height: 100vh; /* will cover the 100% of viewport */
-}
+  overflow: hidden;
-
+  display: block;
-.App-logo {
+  position: relative;
-  height: 40vmin;
+  padding-bottom: 60px; /* height of your footer + 30px*/
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/App.js

@@ -1,25 +1,35 @@
 import React from 'react';
-import logo from './logo.svg';
+
-import './App.css';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+import Routes from './components/Routes';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#4EAF47',
+    }
+  }
+});
+
 
 function App() {
   return (
-    <div className="App">
+    <ThemeProvider theme={theme}>
-      <header className="App-header">
+      <Router>
-        <img src={logo} className="App-logo" alt="logo" />
+        <div className="wrapper">
-        <p>
+          <Navbar />
-          Edit <code>src/App.js</code> and save to reload.
+          <div style={{margin: '0 22px'}}>
-        </p>
+            <Routes />
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
           </div>
+          <Footer />
+        </div>
+      </Router>
+    </ThemeProvider>
   );
 }
 

src/components/Footer.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import Typography from '@material-ui/core/Typography';
+
+class Footer extends Component {
+  render() {
+    return (
+      <footer style={{position:'absolute', bottom: '0', width: '100%'}}>
+        <div style={{minHeight:'30px', backgroundColor:'lightgrey', textAlign: 'center', paddingTop: '2px'}}>
+          <div style={{color: 'grey', height: '100%'}}>
+            <Link to={"/impressum"} style={{textDecoration: 'none', color: 'inherit'}}>Impressum</Link>
+            <Typography style={{margin: '0px 10px 0px 10px', display: 'initial', fontSize: '1rem'}}>|</Typography>
+            <Link to={"/ueberuns"} style={{textDecoration: 'none', color: 'inherit'}}>Über uns</Link>
+            <Typography style={{margin: '0px 10px 0px 10px', display: 'initial', fontSize: '1rem'}}>|</Typography>
+            <Link to={"/faq"} style={{textDecoration: 'none', color: 'inherit'}}>FAQ</Link>
+          </div>
+        </div>
+      </footer>
+    );
+  };
+}
+
+export default Footer;

src/components/Home.js

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

src/components/Navbar.js

@@ -0,0 +1,111 @@
+import React, { Component, Fragment } from 'react';
+import { Link } 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';
+import Toolbar from '@material-ui/core/Toolbar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const styles = (theme) => ({
+  drawerWidth: {
+    // color: theme.palette.primary.main,
+    width: window.innerWidth < 600 ? '100%' : '220px',
+    borderRight: `1px solid ${theme.palette.primary.main}`
+  },
+  appBarColor: {
+    backgroundColor: theme.palette.primary.main
+  }
+});
+
+
+class Navbar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false
+    };
+  }
+
+  toggleDrawer = () => {
+    this.setState({ open: !this.state.open });
+  }
+
+  render(){
+    return (
+      <div>
+        <AppBar
+          position="relative"
+          style={{height: '50px', marginBottom: '30px'}}
+          classes={{root: this.props.classes.appBarColor}}
+        >
+          <Toolbar style={{height: '50px', minHeight: '50px', padding: 0}}>
+            <IconButton
+              color="inherit"
+              onClick={this.toggleDrawer}
+              style={{margin: '0 10px'}}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Link to={"/"} style={{textDecoration: 'none', color: 'inherit'}}>
+              <Typography variant="h6" noWrap>
+                senseBox Blockly
+              </Typography>
+            </Link>
+          </Toolbar>
+        </AppBar>
+        <Drawer
+          variant="temporary"
+          anchor="left"
+          onClose={this.toggleDrawer}
+          open={this.state.open}
+          classes={{paper: this.props.classes.drawerWidth}}
+          ModalProps={{keepMounted: true}} // Better open performance on mobile.
+        >
+          <div style={{height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px'}} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
+            <div style={{display:' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%'}}>
+              <Typography variant="h6" style={{display:'inline'}}>
+                Menü
+              </Typography>
+              <div style={{float: 'right'}}>
+                <ChevronLeftIcon style={{verticalAlign: 'middle'}}/>
+              </div>
+            </div>
+          </div>
+          <List>
+            {[{text: 'Tutorials', icon: <InboxIcon />}, {text: 'Einstellungen', icon: <InboxIcon />}].map((item, index) => (
+              <ListItem button key={index} onClick={this.toggleDrawer}>
+                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemText primary={item.text} />
+              </ListItem>
+            ))}
+          </List>
+          <Divider classes={{root: this.props.classes.appBarColor}} style={{marginTop: 'auto'}}/>
+          <List>
+            {[{text: 'Über uns', icon: <InboxIcon />},{text: 'Kontakt', icon: <MailIcon />}, {text: 'Impressum', icon: <InboxIcon />}].map((item, index) => (
+              <ListItem button key={index} onClick={this.toggleDrawer}>
+                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemText primary={item.text} />
+              </ListItem>
+            ))}
+          </List>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, {withTheme: true})(Navbar);

src/components/NotFound.js

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

src/components/Routes.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import { Route, Switch } from 'react-router-dom';
+
+import Home from './Home';
+import NotFound from './NotFound';
+
+class Routes extends Component {
+
+  render() {
+    return (
+      <Switch>
+        <Route path="/" exact component={Home} />
+        <Route component={NotFound} />
+      </Switch>
+    );
+  }
+}
+
+export default Routes;