added drawer + restructure #4

frontend/src/App.js

@@ -2,9 +2,8 @@ import React, { Component } from "react";
 import {
   BrowserRouter
 } from "react-router-dom";
-import Navbar from "./components/navbar";
-import Footer from "./components/footer";
-import Content from "./components/content";
+import Navbar from "./components/navigation";
+
 import "./App.css";
 
 
@@ -15,8 +14,6 @@ class App extends Component {
     return (
       <BrowserRouter basename="/">
         <Navbar></Navbar>
-        <Content></Content>
-        <Footer></Footer>
       </BrowserRouter>
     );
   }

frontend/src/components/content.js

@@ -19,7 +19,7 @@ export default function Content() {
     return (
 
         <div className={classes.root}>
-            <Route exact path="/" component={Overview} />
+            <Route path="/overview" component={Overview} />
         </div>
 
     );

frontend/src/components/navbar.js

@@ -1,50 +0,0 @@
-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/navigation.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme, fade } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+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 ListItemText from '@material-ui/core/ListItemText';
+import Footer from "./footer";
+import Content from "./content"
+import Link1 from '@material-ui/core/Link';
+import { Link } from "react-router-dom";
+import SearchIcon from '@material-ui/icons/Search';
+import InputBase from '@material-ui/core/InputBase';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+    },
+    appBar: {
+        transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    appBarShift: {
+        width: `calc(100% - ${drawerWidth}px)`,
+        marginLeft: drawerWidth,
+        transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    menuButton: {
+        marginRight: theme.spacing(2),
+    },
+    hide: {
+        display: 'none',
+    },
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+    },
+    drawerPaper: {
+        width: drawerWidth,
+    },
+    drawerHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+        justifyContent: 'flex-end',
+    },
+    content: {
+        flexGrow: 1,
+        padding: 0,
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        marginLeft: -drawerWidth,
+    },
+    contentShift: {
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginLeft: 0,
+    },
+    search: {
+        position: 'relative',
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: fade(theme.palette.common.white, 0.15),
+        '&:hover': {
+            backgroundColor: fade(theme.palette.common.white, 0.25),
+        },
+        marginLeft: 0,
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            marginLeft: theme.spacing(1),
+            width: 'auto',
+        },
+    },
+    searchIcon: {
+        padding: theme.spacing(0, 2),
+        height: '100%',
+        position: 'absolute',
+        pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    inputRoot: {
+        color: 'inherit',
+    },
+    inputInput: {
+        padding: theme.spacing(1, 1, 1, 0),
+        // vertical padding + font size from searchIcon
+        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: '12ch',
+            '&:focus': {
+                width: '20ch',
+            },
+        },
+    },
+    grow: {
+        flexGrow: 1,
+    },
+}));
+
+export default function Navigation() {
+    const classes = useStyles();
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+
+    const handleDrawerOpen = () => {
+        setOpen(true);
+    };
+
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+
+    function ListItemLink(props) {
+        return <ListItem button component={Link1} {...props} />;
+    }
+
+    return (
+        <div className={classes.root}>
+            <CssBaseline />
+            <AppBar
+                position="fixed"
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })}
+            >
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        onClick={handleDrawerOpen}
+                        edge="start"
+                        className={clsx(classes.menuButton, open && classes.hide)}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Link1 href="/" class="logo">Sim Companies Dashboard</Link1>
+                    <div className={classes.grow} />
+                    <div className={classes.search}>
+                        <div className={classes.searchIcon}>
+                            <SearchIcon />
+                        </div>
+                        <InputBase
+                            placeholder="Search…"
+                            classes={{
+                                root: classes.inputRoot,
+                                input: classes.inputInput,
+                            }}
+                            inputProps={{ 'aria-label': 'search' }}
+                        />
+                    </div>
+                </Toolbar>
+            </AppBar>
+            <Drawer
+                className={classes.drawer}
+                variant="persistent"
+                anchor="left"
+                open={open}
+                classes={{
+                    paper: classes.drawerPaper,
+                }}
+            >
+                <div className={classes.drawerHeader}>
+                    <IconButton onClick={handleDrawerClose}>
+                        {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                    </IconButton>
+                </div>
+                <Divider />
+                <List>
+                    {['Overview'].map((text, index) => (
+                        <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
+                            <ListItemText primary={text} />
+                        </ListItemLink>
+                    ))}
+                </List>
+            </Drawer>
+            <main className={clsx(classes.content, {
+                [classes.contentShift]: open,
+            })}>
+                <div className={classes.drawerHeader} />
+                <Content></Content>
+                <Footer></Footer>
+            </main>
+
+        </div>
+    );
+}

frontend/src/components/overview/overview.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-export default function Content() {
+export default function Overview() {
     const classes = useStyles();
 
     return (