redesigned drawer

frontend/src/App.js

@@ -3,6 +3,7 @@ import {
   BrowserRouter
 } from "react-router-dom";
 import Navbar from "./components/navigation";
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 import "./App.css";
 
@@ -10,11 +11,27 @@ import "./App.css";
 
 class App extends Component {
   render() {
+    const theme = createMuiTheme({
+      palette: {
+        primary: {
+          main: "#0B1929",
+          light: "#9daac1"
+        },
+        secondary: {
+          main: "#FFC800",
+          light: "#ffdf7b"
+        }
+      }
+    })
+
     //change basename in browserrouter if uri changes
     return (
+      <ThemeProvider theme={theme}>
         <BrowserRouter basename="/simcompanies">
           <Navbar></Navbar>
         </BrowserRouter>
+      </ThemeProvider>
+
     );
   }
 }

frontend/src/components/navigation.js

@@ -6,7 +6,6 @@ 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';
@@ -20,21 +19,26 @@ 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';
+import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
+import { ListItemIcon } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import Zoom from '@material-ui/core/Zoom';
 
-const drawerWidth = 240;
+const drawerWidth = 64;
-
+const drawerWidthOpen = 240;
 const useStyles = makeStyles((theme) => ({
     root: {
         display: 'flex',
     },
     appBar: {
+        zIndex: theme.zIndex.drawer + 1,
         transition: theme.transitions.create(['margin', 'width'], {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen,
         }),
     },
     appBarShift: {
-        width: `calc(100% - ${drawerWidth}px)`,
+        width: `calc(100% - ${drawerWidthOpen}px)`,
         marginLeft: drawerWidth,
         transition: theme.transitions.create(['margin', 'width'], {
             easing: theme.transitions.easing.easeOut,
@@ -50,8 +54,21 @@ const useStyles = makeStyles((theme) => ({
     drawer: {
         width: drawerWidth,
         flexShrink: 0,
+        whiteSpace: 'nowrap'
     },
-    drawerPaper: {
+    drawerOpen: {
+        width: drawerWidthOpen,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: 'hidden',
         width: drawerWidth,
     },
     drawerHeader: {
@@ -69,7 +86,7 @@ const useStyles = makeStyles((theme) => ({
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen,
         }),
-        marginLeft: -drawerWidth,
+        marginLeft: 0,
     },
     contentShift: {
         transition: theme.transitions.create('margin', {
@@ -175,12 +192,16 @@ export default function Navigation() {
                 </Toolbar>
             </AppBar>
             <Drawer
-                className={classes.drawer}
+                variant="permanent"
-                variant="persistent"
+                className={clsx(classes.drawer, {
-                anchor="left"
+                    [classes.drawerOpen]: open,
-                open={open}
+                    [classes.drawerClose]: !open,
+                })}
                 classes={{
-                    paper: classes.drawerPaper,
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
                 }}
             >
                 <div className={classes.drawerHeader}>
@@ -191,9 +212,16 @@ export default function Navigation() {
                 <Divider />
                 <List>
                     {['Resources'].map((text, index) => (
+
                         <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
+                            <Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay="500">
+                                <ListItemIcon><EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon></ListItemIcon>
+                            </Tooltip>
                             <ListItemText primary={text} />
+
                         </ListItemLink>
+
+
                     ))}
                 </List>
             </Drawer>