Implement base design.

Author: Bart Hazen

src/components/Header/index.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+const lightColor = 'rgba(255, 255, 255, 0.7)';
+
+const styles = (theme) => ({
+    secondaryBar: {
+        zIndex: 0,
+    },
+    menuButton: {
+        marginLeft: -theme.spacing(1),
+    },
+    iconButtonAvatar: {
+        padding: 4,
+    },
+    link: {
+        textDecoration: 'none',
+        color: lightColor,
+        '&:hover': {
+            color: theme.palette.common.white,
+        },
+    },
+    button: {
+        borderColor: lightColor,
+    },
+});
+
+function Header(props) {
+    const { classes, title, onDrawerToggle } = props;
+
+    return (
+        <React.Fragment>
+            <AppBar color="primary" position="sticky" elevation={0}>
+                <Toolbar>
+                    <Grid container spacing={1} alignItems="center">
+                        <Hidden smUp>
+                            <Grid item>
+                                <IconButton
+                                    color="inherit"
+                                    aria-label="open drawer"
+                                    onClick={onDrawerToggle}
+                                    className={classes.menuButton}
+                                >
+                                    <MenuIcon />
+                                </IconButton>
+                            </Grid>
+                        </Hidden>
+                    </Grid>
+                </Toolbar>
+            </AppBar>
+            <AppBar
+                component="div"
+                className={classes.secondaryBar}
+                color="primary"
+                position="static"
+                elevation={0}
+            >
+                <Toolbar>
+                    <Grid container alignItems="center" spacing={1}>
+                        <Grid item xs>
+                            <Typography color="inherit" variant="h5" component="h1">{title}</Typography>
+                        </Grid>
+                    </Grid>
+                </Toolbar>
+            </AppBar>
+        </React.Fragment>
+    );
+}
+
+Header.propTypes = {
+    classes: PropTypes.object.isRequired,
+    title: PropTypes.string.isRequired,
+    onDrawerToggle: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(Header);

src/index.js

@@ -4,19 +4,9 @@ import ReactDOM from 'react-dom';
 import './index.scss';
 import App from './App';
 
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-});
-
 ReactDOM.render(
-  <MuiThemeProvider theme={theme}>
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  </MuiThemeProvider>,
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
   document.getElementById('root')
 );

src/pages/Homepage/index.js

@@ -1,11 +1,21 @@
 import React from 'react';
+import Header from '../../components/Header';
 
 import './style.scss';
 
-export default function Homepage(props) {
+export default class Homepage extends React.Component {
+  render() {
     return (
-        <>
-            Homepage
-        </>
+      <React.Fragment>
+        <Header
+          onDrawerToggle={this.props.handleDrawerToggle}
+          title="Python Create"
+        />
+
+        <main className={this.props.classes.main}>
+          Homepage.
+        </main>
+      </React.Fragment>
     );
+  }
 }

src/pages/SetupPy/index.js

@@ -1,11 +1,21 @@
 import React from 'react';
+import Header from '../../components/Header';
 
 import './style.scss';
 
-export default function SetupPy(props) {
-  return (
-    <>
-      Setup.py
-    </>
-  );
+export default class SetupPy extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <Header
+          onDrawerToggle={this.props.handleDrawerToggle}
+          title="setup.py generator"
+        />
+
+        <main className={this.props.classes.main}>
+          Setup.py generator.
+        </main>
+      </React.Fragment>
+    );
+  }
 }

src/routes/RouteWithScene.js

@@ -9,9 +9,7 @@ const RouteWithScene = props => {
         <Route
             {...rest}
             render={matchProps => (
-                <Scene>
-                    <Component {...matchProps} />
-                </Scene>
+                <Scene component={Component} {...matchProps} />
             )}
         />
     );
@@ -20,7 +18,7 @@ const RouteWithScene = props => {
 RouteWithScene.propTypes = {
     component: PropTypes.any.isRequired,
     scene: PropTypes.any.isRequired,
-    path: PropTypes.string
+    path: PropTypes.string,
 };
 
 export default RouteWithScene;

src/routes/index.js

@@ -1,16 +1,16 @@
 import React from "react";
 import { Switch, Redirect } from "react-router-dom";
 
-import Main from "../scenes/Main"
+import Paperbase from "../scenes/Main"
 import SetupPy from "../pages/SetupPy"
 import Homepage from "../pages/Homepage"
 import RouteWithScene from "./RouteWithScene";
 
 export default function Routes() {
   return (
     <Switch>
-      <RouteWithScene path="/setup-py-generator" component={SetupPy} scene={Main} />
-      <RouteWithScene path="/" component={Homepage} scene={Main} />
+      <RouteWithScene path="/setup-py-generator" scene={Paperbase} component={SetupPy} />
+      <RouteWithScene path="/" scene={Paperbase} component={Homepage} />
       <Redirect to="/" />
     </Switch>
   );