profile1

src/Utils/Index.js

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,6 +6,7 @@ import Fade from '@material-ui/core/Fade';
 import Grid from '@material-ui/core/Grid';
 import { Typography, Avatar } from '@material-ui/core';
 import Images from '../assets/Images';
+import { Link, useRouteMatch } from 'react-router-dom';
 
 const useStyles = makeStyles({
     avatar: {
@@ -32,6 +33,8 @@ function FadeMenu() {
 
     const classes = useStyles();
 
+    let { path, url } = useRouteMatch();
+
     return (
         <div>
             <Grid container justify="center" alignItems="center" >
@@ -58,8 +61,10 @@ function FadeMenu() {
                 </MenuItem>
                 <MenuItem onClick={handleClose}>
                     <div style={{ display: 'flex', padding: 10 }}>
+                        <Link to={'/home/profile'}>
                             <img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
                             <Typography>Settings</Typography>
+                        </Link>
                     </div>
                 </MenuItem>
                 <MenuItem onClick={handleClose}>
@@ -80,24 +85,49 @@ const footerStyle = {
     // borderTop: "1px solid #E7E7E7",
     textAlign: "center",
     padding: "20px",
-    left: "0",
-    bottom: "0",
+    left: 0,
+    bottom: 0,
+    right: 0,
     height: "80px",
     width: "100%"
-  };
+};
 
-  const phantomStyle = {
+const phantomStyle = {
     display: "block",
-  };
+};
 
-  function Footer({ children }) {
+function Footer({ children }) {
     return (
         <div>
             {/* <div style={phantomStyle} /> */}
             <div style={footerStyle}>{children}</div>
         </div>
     );
+}
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height
+    };
+}
+
+function UseWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(
+        getWindowDimensions()
+    );
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
         }
 
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+}
 
-export { FadeMenu, Footer };
+export { FadeMenu, Footer, UseWindowDimensions };
\ No newline at end of file

src/router/homeRoutes.js

@@ -5,6 +5,7 @@ import ApprovalMatrix from '../container/ApprovalMatrix'
 import BudgetTahunan from '../container/BudgetTahunan';
 import HomePage from '../container/HomePage';
 import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
+import Profile from '../container/Profile';
 
 const routes = [
   {
@@ -23,7 +24,11 @@ const routes = [
     path: "/home/budget-tahunan",
     main: BalanceSheet
   },
+  {
+    path: "/home/profile",
+    main: Profile
+  },
 
-  ];
+];
 
 export default routes;
\ No newline at end of file