Merge branch 'deni-dev(pc)' into 'master'

profile1

See merge request !22

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 }}>
-                        <img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
-                        <Typography>Settings</Typography>
+                        <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>
+        <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 };
\ No newline at end of file
+export { FadeMenu, Footer, UseWindowDimensions };
\ No newline at end of file

src/router/homeRoutes.js

@@ -5,25 +5,30 @@ 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 = [
-    {
-      path: "/home/beranda",
-      main: HomePage
-    },
-    {
-      path: "/home/userrole",
-      main: UserRole
-    },
-    {
-      path: "/home/approval",
-      main: ApprovalMatrix
-    },
-    {
-      path: "/home/budget-tahunan",
-      main: BalanceSheet
-    },
-    
-  ];
+  {
+    path: "/home/beranda",
+    main: HomePage
+  },
+  {
+    path: "/home/userrole",
+    main: UserRole
+  },
+  {
+    path: "/home/approval",
+    main: ApprovalMatrix
+  },
+  {
+    path: "/home/budget-tahunan",
+    main: BalanceSheet
+  },
+  {
+    path: "/home/profile",
+    main: Profile
+  },
+
+];
 
 export default routes;
\ No newline at end of file