basic layout #4

frontend/src/components/content.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Overview from "./overview/overview";
+import {
+    Route,
+} from "react-router-dom";
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+        padding: 20,
+        backgroundColor: "#eeeeee",
+    },
+}));
+
+export default function Content() {
+    const classes = useStyles();
+
+    return (
+
+        <div className={classes.root}>
+            <Route exact path="/" component={Overview} />
+        </div>
+
+    );
+}

frontend/src/components/footer.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+function Copyright() {
+    return (
+        <Typography variant="body2" align="center">
+            {'Copyright © '}
+            {new Date().getFullYear()}
+            {' Oliver Boehlk, Falk Bachmann'}
+            {'.'}
+        </Typography>
+    );
+}
+
+const useStyles = makeStyles(theme => ({
+    footer: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.light,
+        padding: theme.spacing(6, 0),
+    },
+}));
+
+export default function Footer() {
+    const classes = useStyles();
+
+    return (
+        <footer className={classes.footer}>
+            <Box >
+                <Copyright />
+            </Box>
+        </footer >
+    );
+}

frontend/src/components/navbar.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { makeStyles } from '@material-ui/core/styles';
+import { Link } from "react-router-dom";
+import Toolbar from '@material-ui/core/Toolbar';
+import Link1 from '@material-ui/core/Link';
+
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+    },
+    title: {
+        paddingTop: 10,
+    },
+    grow: {
+        flexGrow: 1,
+    },
+    tabs: {
+        ...theme.mixins.toolbar,
+        marginRight: 15
+    }
+
+}));
+
+export default function Navbar(props) {
+    const classes = useStyles();
+    const [value, setValue] = React.useState(0);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+    return (
+        <React.Fragment>
+            <CssBaseline />
+            <AppBar position="static" className={classes.root}>
+                <Toolbar >
+                    <Link1 href="/" class="site-logo">Sim Companies Dashboard</Link1>
+                    <div className={classes.grow} />
+                    <Tabs className={classes.tabs} variant="scrollable" value={value} onChange={handleChange}>
+                        <Tab className={classes.tabs} tabIndex='0' label="Overview" to="/" component={Link} />
+                    </Tabs>
+                </Toolbar>
+            </AppBar>
+        </React.Fragment >
+    );
+}

frontend/src/components/overview/overview.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+        padding: 20,
+        backgroundColor: "#eeeeee",
+    },
+}));
+
+export default function Content() {
+    const classes = useStyles();
+
+    return (
+
+        <div className={classes.root}>
+            Hallo i bims 1 nicer Overview
+        </div>
+
+    );
+}