update

src/components/FormInput.jsx

@@ -0,0 +1,205 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+import MenuItem from 'material-ui/Menu/MenuItem'
+import TextField from 'material-ui/TextField'
+import Button from 'material-ui/Button'
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 200,
+  },
+  menu: {
+    width: 200,
+  },
+});
+
+class Form extends React.Component {
+
+state= { // set initial state to empty strings
+    firstName: '',
+    lastName: '',
+    userName: '',
+    email: '',
+    passWord: '',
+  }
+
+  handleChange = e => {
+    this.props.onChange({ [e.target.name]: e.target.value })
+    this.setState({
+      [e.target.name]: e.target.value // change values for input fields and send them to component state
+    })
+  };
+
+  onSubmit = e => {
+      e.preventDefault() // prevent reloading on submit
+      // this.props.onSubmit(this.state) only needed for onSubmit => changed to onChange
+      this.setState({ // empty state after submit to clear fields
+        firstName: '',
+        lastName: '',
+        userName: '',
+        email: '',
+        passWord: '',
+      })
+  }
+
+  render() {
+    const { classes } = this.props
+
+    return (
+      <div>
+          <form className="container">
+            <TextField
+              name='firstName'
+              type='text'
+              value={this.state.firstName}
+              placeholder='First Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='lastName'
+              type='text'
+              value={this.state.lastName}
+              placeholder='Last Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='userName'
+              type='text'
+              required
+              value={this.state.userName}
+              placeholder='User Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='email'
+              type='email'
+              required
+              value={this.state.email}
+              placeholder='Email Address'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='passWord'
+              type='password'
+              min='8'
+              value={this.state.passWord}
+              placeholder='Password (min 8 Characters)'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/><br/>
+            <Button raised color="primary" className={classes.button} onClick={ (e) => this.onSubmit(e)}>Submit with preventDefault</Button>
+          </form>
+        </div>
+      );
+    }
+}
+
+export default withStyles(styles)(Form);
+
+// ==================================================
+// This is the onSubmit version for the form (see additional changes inside secondnest.jsx)
+// export default class Form extends React.Component {
+//   state= {
+//     firstName: '',
+//     lastName: '',
+//     userName: '',
+//     email: '',
+//     passWord: '',
+//   }
+//
+//   change = e => {
+//     this.setState({
+//       [e.target.name]: e.target.value
+//     })
+//   };
+//
+//   onSubmit = e => {
+//       e.preventDefault()
+//       this.props.onSubmit(this.state)
+//       this.setState({
+//         firstName: '',
+//         lastName: '',
+//         userName: '',
+//         email: '',
+//         passWord: '',
+//       })
+//   }
+//
+//   render() {
+//     return (
+//         <form>
+//           <input
+//             name='firstName'
+//             value={this.state.firstName}
+//             placeholder='First Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='lastName'
+//             value={this.state.lastName}
+//             placeholder='Last Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='userName'
+//             value={this.state.userName}
+//             placeholder='User Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='email'
+//             value={this.state.email}
+//             placeholder='Email Address'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='passWord'
+//             type='password'
+//             value={this.state.passWord}
+//             placeholder='Password'
+//             onChange={e => this.change(e)}/><br/>
+//           <button onClick={ (e) => this.onSubmit(e)}>Submit with preventDefault</button>
+//         </form>
+//       );
+//     }
+// }
+
+
+// ###############################################################
+
+// change function added to cleanUp the code, see below
+//
+// render() {
+//   return (
+//       <form>
+//         <input
+//           value={this.state.firstName}
+//           placeholder='First Name'
+//           onChange={e => this.setState({firstName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.lastName}
+//           placeholder='Last Name'
+//           onChange={e => this.setState({lastName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.userName}
+//           placeholder='User Name'
+//           onChange={e => this.setState({userName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.email}
+//           placeholder='Email Address'
+//           onChange={e => this.setState({email: e.target.value})}/><br/>
+//         <input
+//           value={this.state.passWord}
+//           placeholder='Password'
+//           onChange={e => this.setState({passWord: e.target.value})}/><br/>
+//       </form>
+//     );
+//   }
+// }

src/components/IndexButtons.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-link'
+
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit
+  }
+});
+
+function IndexButtons(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <Link to="/search/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          ElasticSearch
+        </Button>
+      </Link>
+      <Link to="/page-1/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          Sorted Table
+        </Button>
+      </Link>
+      <Link to="/page-2/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          GraphQL Table
+        </Button>
+      </Link>
+      <Link to="/nestedroutes/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          Forms &amp; Photogrids
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
+IndexButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IndexButtons);

src/components/ResponsiveDrawer.jsx

@@ -22,7 +22,7 @@ import { mailFolderListItems, otherMailFolderListItems } from '../data/tileData'
 import NestedList from '../data/tileDataClass'
 import Logo from '../static/instar_250x65.png'
 
-const drawerWidth = 240;
+const drawerWidth = 250;
 
 const styles = theme => ({
   root: {
@@ -53,16 +53,7 @@ const styles = theme => ({
     [theme.breakpoints.up('md')]: {
       width: drawerWidth,
       position: 'relative',
-      height: '100%',
-    },
-    shadowContainer: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 3
-      },
-      shadowRadius: 5,
-      shadowOpacity: 1.0
+      bottom: 0,
     }
   },
   input: {
@@ -84,38 +75,33 @@ class ResponsiveDrawer extends React.Component {
 
     const drawer = (
       <div>
-        <Link to="/"><img src={Logo} alt="INSTAR Deutschland GmbH" className="shadowContainer" /></Link>
+        <Link to="/"><img src={Logo} alt="INSTAR Deutschland GmbH" /></Link>
         <List>{mailFolderListItems}</List>
         <Divider />
         <List>{otherMailFolderListItems}</List>
       </div>
     );
-    // http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/
+
     return (
       <div>
-        <AppBar className={classes.appBar}>
+        <AppBar className={classes.appBar} color="default">
           <Toolbar>
             <IconButton
-              color="contrast"
+              color="inherit"
               aria-label="open drawer"
               onClick={this.handleDrawerToggle}
               className={classes.navIconHide}
             >
               <MenuIcon />
             </IconButton>
-            <Typography type="title" color="inherit" className={classes.flex} noWrap>
+            <Typography type="title" className={classes.flex} noWrap>
               INSTAR Wiki
             </Typography>
-            <Input
-              placeholder="Search Input"
-              className={classes.input}
-              inputProps={{
-                'aria-label': 'Description',
-              }}
-            />
-            <IconButton className={classes.button} aria-label="Delete">
-              <SearchIcon />
-            </IconButton>
+            <Link to="/search">
+              <IconButton className={classes.button} aria-label="Delete">
+                <SearchIcon />
+              </IconButton>
+            </Link>
           </Toolbar>
         </AppBar>
         <Hidden mdUp>

src/components/SearchInput.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
+export default class Form extends React.Component {
+  state= {
+    firstName: '',
+    lastName: '',
+    userName: '',
+    email: '',
+    passWord: '',
+  }
+
+  change = e => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  };
+
+  onSubmit = e => {
+      e.preventDefault()
+      this.props.onSubmit(this.state)
+      this.setState({
+        firstName: '',
+        lastName: '',
+        userName: '',
+        email: '',
+        passWord: '',
+      })
+  }
+
+render() {
+  return (
+      <form>
+        <input
+          value={this.state.firstName}
+          placeholder='First Name'
+          onChange={e => this.setState({firstName: e.target.value})}/><br/>
+        <input
+          value={this.state.lastName}
+          placeholder='Last Name'
+          onChange={e => this.setState({lastName: e.target.value})}/><br/>
+        <input
+          value={this.state.userName}
+          placeholder='User Name'
+          onChange={e => this.setState({userName: e.target.value})}/><br/>
+        <input
+          value={this.state.email}
+          placeholder='Email Address'
+          onChange={e => this.setState({email: e.target.value})}/><br/>
+        <input
+          value={this.state.passWord}
+          placeholder='Password'
+          onChange={e => this.setState({passWord: e.target.value})}/><br/>
+      </form>
+    );
+  }
+}