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

pushhh

See merge request !2

src/Utils/Index.js

+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { makeStyles } from '@material-ui/core/styles';
+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';
+
+const useStyles = makeStyles({
+    avatar: {
+        margin: 10,
+    },
+    orangeAvatar: {
+        margin: 10,
+        color: '#fff',
+        backgroundColor: 'black',
+    },
+})
+
+function FadeMenu() {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleClick = event => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div>
+            <Grid container justify="center" alignItems="center" >
+                <div onClick={handleClick}>
+                    <img src={Images.dropdownWhite} alt="React Logo" style={{ marginLeft: 15 }} />
+                </div>
+            </Grid>
+            <Menu
+                id="fade-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                onClose={handleClose}
+                TransitionComponent={Fade}
+            >
+                <MenuItem disabled={true} style={{ opacity: 1 }}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Avatar className={classes.orangeAvatar}>T</Avatar>
+                        <div>
+                            <Typography>Tommy</Typography>
+                            <Typography>tom_my@gmail.com</Typography>
+                        </div>
+                    </div>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <div style={{ display: 'flex', padding: 10 }}>
+                        <img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
+                        <Typography>Settings</Typography>
+                    </div>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <div style={{ display: 'flex', padding: 10 }}>
+                        <img src={Images.logout} style={{ height: 20, width: 20, marginRight: 20 }} />
+                        <Typography>Logout</Typography>
+                    </div>
+                </MenuItem>
+            </Menu>
+        </div>
+    );
+}
+
+const footerStyle = {
+    backgroundColor: "purple",
+    fontSize: "20px",
+    color: "white",
+    borderTop: "1px solid #E7E7E7",
+    textAlign: "center",
+    padding: "20px",
+    position: "fixed",
+    left: "0",
+    bottom: "0",
+    height: "60px",
+    width: "100%"
+  };
+  
+  const phantomStyle = {
+    display: "block",
+    padding: "20px",
+    height: "60px",
+    width: "100%"
+  };
+  
+  function Footer({ children }) {
+    return (
+      <div>
+        <div style={phantomStyle} />
+        <div style={footerStyle}>{children}</div>
+      </div>
+    );
+  }
+  
+
+export { FadeMenu, Footer };
\ No newline at end of file

src/assets/Images.js

+const Images = {
+
+    dropdownWhite: require('./dropdown-white.svg'),
+    flagEnglish: require('./english.svg'),
+    search: require('./search.png'),
+    logout: require('./setting.png'),
+    setting: require('./logout.png'),
+
+}
+
+export default Images
\ No newline at end of file

src/assets/dropdown-white.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H23.977V24H0z" transform="rotate(90 13.5 2.5)"/>
+        <path fill="#4B4B4B" d="M8.998 10.02L15.002 8.998 13.975 14.998z" transform="rotate(90 13.5 2.5) rotate(45 12 11.998)"/>
+    </g>
+</svg>

src/assets/english.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="16" cy="16" r="16" fill="#FFF" opacity=".247"/>
+        <g>
+            <path d="M0 0H24V24H0z" transform="translate(4 4)"/>
+            <g fill-rule="nonzero">
+                <path fill="#F5F5F5" d="M17.655 11.78H.31c-.171 0-.31-.139-.31-.31V.32C0 .147.139.01.31.01h17.345c.171 0 .31.138.31.31v11.15c0 .171-.139.31-.31.31z" transform="translate(4 4) translate(3 6)"/>
+                <g fill="#FF4B55">
+                    <path d="M17.965.915H0V.32C0 .15.139.01.31.01h17.345c.171 0 .31.14.31.31v.596zM0 3.631H17.965V4.631H0zM0 1.82H17.965V2.8200000000000003H0zM17.965 6.347H.31c-.171 0-.31-.138-.31-.31v-.595h17.965v.905zM0 9.064H17.965V10.064H0zM17.655 11.78H.31c-.171 0-.31-.139-.31-.31v-.596h17.965v.596c0 .171-.139.31-.31.31zM0 7.253H17.965V8.253H0z" transform="translate(4 4) translate(3 6)"/>
+                </g>
+                <path fill="#41479B" d="M8.053.01H.31C.139.01 0 .148 0 .32v5.718c0 .17.139.31.31.31h7.743c.171 0 .31-.14.31-.31V.319c0-.17-.139-.31-.31-.31z" transform="translate(4 4) translate(3 6)"/>
+                <g fill="#F5F5F5">
+                    <path d="M.379.054L.447.26.664.26c.028 0 .04.036.017.053L.507.443l.065.206C.581.676.55.7.527.682L.351.556.175.682C.152.698.12.676.13.649L.195.443.021.314C-.002.297.01.262.038.261L.255.26.323.054C.332.027.37.027.38.054zM.379 1.13l.068.205.217.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.045.032l-.176-.126-.176.127C.152 1.774.12 1.752.13 1.725l.065-.207-.174-.128c-.023-.017-.011-.053.017-.053l.217-.002.068-.205c.009-.027.047-.027.056 0zM.379 2.205l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.045.033l-.176-.126-.176.126C.152 2.85.12 2.827.13 2.801l.065-.207-.174-.129c-.023-.017-.011-.052.017-.053l.217-.001.068-.206c.009-.026.047-.026.056 0zM.379 3.28l.068.206.217.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.045.033l-.176-.126-.176.126C.152 3.925.12 3.903.13 3.876l.065-.206-.174-.13c-.023-.016-.011-.052.017-.052l.217-.002.068-.205c.009-.027.047-.027.056 0zM.379 4.356l.068.206.217.002c.028 0 .04.036.017.052l-.174.13.065.206c.009.026-.022.049-.045.032l-.176-.126-.176.126C.152 5.001.12 4.978.13 4.952l.065-.207-.174-.129C-.002 4.6.01 4.564.038 4.564l.217-.002.068-.206c.009-.026.047-.026.056 0zM1.213.581l.069.206.217.002c.028 0 .04.036.017.052L1.34.97l.066.207c.008.026-.022.049-.045.032l-.176-.126-.177.126c-.022.017-.053-.006-.044-.032L1.03.97.856.841C.833.825.845.79.873.79l.216-.002.069-.206c.009-.026.047-.026.055 0zM1.213 1.657l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.176-.126-.177.126C.987 2.3.956 2.279.965 2.252l.065-.206-.174-.13C.833 1.9.845 1.865.873 1.865l.216-.001.069-.206c.009-.027.047-.027.055 0zM1.213 2.732l.069.206.217.002c.028 0 .04.036.017.052l-.175.13.066.206c.008.027-.022.049-.045.032l-.176-.126-.177.126c-.022.017-.053-.005-.044-.032l.065-.207-.174-.129C.833 2.976.845 2.94.873 2.94l.216-.002.069-.206c.009-.026.047-.026.055 0zM1.213 3.808l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.176-.126-.177.126c-.022.016-.053-.006-.044-.033l.065-.206-.174-.129c-.023-.017-.011-.052.017-.053l.216-.001.069-.206c.009-.027.047-.027.055 0zM2.048.054l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033L2.02.556l-.177.126C1.821.698 1.791.676 1.8.649l.066-.206-.175-.13c-.022-.016-.01-.052.018-.052L1.924.26l.069-.206c.009-.027.046-.027.055 0zM2.048 1.13l.069.205.217.002c.028 0 .04.036.017.053l-.175.128.066.207c.008.027-.022.049-.045.032l-.176-.126-.177.126c-.023.017-.053-.005-.045-.032l.066-.207-.175-.128c-.022-.017-.01-.053.018-.053l.216-.002.069-.205c.009-.027.046-.027.055 0zM2.048 2.205l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.176-.126-.177.126c-.023.016-.053-.006-.045-.033l.066-.206-.175-.129c-.022-.017-.01-.052.018-.053l.216-.001.069-.206c.009-.026.046-.026.055 0zM2.048 3.28l.069.206.217.002c.028 0 .04.036.017.053l-.175.128.066.207c.008.027-.022.049-.045.033l-.176-.126-.177.126c-.023.016-.053-.006-.045-.033l.066-.207-.175-.128c-.022-.017-.01-.053.018-.053l.216-.002.069-.205c.009-.027.046-.027.055 0zM2.048 4.356l.069.206.217.002c.028 0 .04.036.017.052l-.175.13.066.206c.008.026-.022.049-.045.032l-.176-.126-.177.126c-.023.017-.053-.006-.045-.032l.066-.207-.175-.129c-.022-.016-.01-.052.018-.052l.216-.002.069-.206c.009-.026.046-.026.055 0zM2.883.581l.069.206.216.002c.028 0 .04.036.018.052L3.01.97l.066.207c.008.026-.022.049-.045.032l-.177-.126-.176.126c-.023.017-.053-.006-.045-.032L2.7.97 2.525.841C2.503.825 2.515.79 2.542.79L2.76.787 2.828.58c.009-.026.046-.026.055 0zM2.883 1.657l.069.206.216.001c.028 0 .04.036.018.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.177-.126-.176.126c-.023.016-.053-.006-.045-.033l.066-.206-.175-.13c-.022-.016-.01-.052.017-.052l.217-.001.069-.206c.009-.027.046-.027.055 0zM2.883 2.732l.069.206.216.002c.028 0 .04.036.018.052l-.175.13.066.206c.008.027-.022.049-.045.032l-.177-.126-.176.126c-.023.017-.053-.005-.045-.032L2.7 3.12l-.175-.129c-.022-.016-.01-.052.017-.052l.217-.002.069-.206c.009-.026.046-.026.055 0zM2.883 3.808l.069.206.216.001c.028 0 .04.036.018.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.177-.126-.176.126c-.023.016-.053-.006-.045-.033l.066-.206-.175-.129c-.022-.017-.01-.052.017-.053l.217-.001.069-.206c.009-.027.046-.027.055 0zM3.718.054l.069.206.216.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.044.033L3.69.556l-.176.126C3.49.698 3.46.676 3.469.649l.065-.206-.174-.13c-.022-.016-.01-.052.017-.052L3.594.26l.069-.206c.008-.027.046-.027.055 0zM3.718 1.13l.069.205.216.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.044.032l-.177-.126-.176.126c-.023.017-.053-.005-.045-.032l.065-.207-.174-.128c-.022-.017-.01-.053.017-.053l.217-.002.069-.205c.008-.027.046-.027.055 0zM3.718 2.205l.069.206.216.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.044.033l-.177-.126-.176.126c-.023.016-.053-.006-.045-.033l.065-.206-.174-.129c-.022-.017-.01-.052.017-.053l.217-.001.069-.206c.008-.026.046-.026.055 0zM3.718 3.28l.069.206.216.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.044.033l-.177-.126-.176.126c-.023.016-.053-.006-.045-.033l.065-.207-.174-.128c-.022-.017-.01-.053.017-.053l.217-.002.069-.205c.008-.027.046-.027.055 0zM3.718 4.356l.069.206.216.002c.028 0 .04.036.017.052l-.174.13.065.206c.009.026-.022.049-.044.032l-.177-.126-.176.126c-.023.017-.053-.006-.045-.032l.065-.207-.174-.129c-.022-.016-.01-.052.017-.052l.217-.002.069-.206c.008-.026.046-.026.055 0zM4.553.581l.068.206.217.002c.028 0 .04.036.017.052L4.681.97l.065.207c.009.026-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.053-.006-.045-.032L4.369.97 4.195.841C4.172.825 4.185.79 4.212.79L4.43.787 4.497.58c.01-.026.047-.026.056 0zM4.553 1.657l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.045.033l-.176-.126-.176.126c-.023.016-.053-.006-.045-.033l.065-.206-.174-.13c-.023-.016-.01-.052.017-.052l.217-.001.068-.206c.01-.027.047-.027.056 0zM4.553 2.732l.068.206.217.002c.028 0 .04.036.017.052l-.174.13.065.206c.009.027-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.053-.005-.045-.032l.065-.207-.174-.129c-.023-.016-.01-.052.017-.052l.217-.002.068-.206c.01-.026.047-.026.056 0zM4.553 3.808l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.045.033l-.176-.126-.176.126c-.023.016-.053-.006-.045-.033l.065-.206-.174-.129c-.023-.017-.01-.052.017-.053l.217-.001.068-.206c.01-.027.047-.027.056 0zM5.388.054l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.045.033L5.36.556l-.176.126C5.16.698 5.13.676 5.139.649l.065-.206-.174-.13c-.023-.016-.011-.052.017-.052L5.264.26l.068-.206c.01-.027.047-.027.056 0zM5.388 1.13l.068.205.217.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.054-.005-.045-.032l.065-.207-.174-.128c-.023-.017-.011-.053.017-.053l.217-.002.068-.205c.01-.027.047-.027.056 0zM5.388 2.205l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.009.027-.022.05-.045.033l-.176-.126-.176.126c-.023.016-.054-.006-.045-.033l.065-.206-.174-.129c-.023-.017-.011-.052.017-.053l.217-.001.068-.206c.01-.026.047-.026.056 0zM5.388 3.28l.068.206.217.002c.028 0 .04.036.017.053l-.174.128.065.207c.009.027-.022.049-.045.033l-.176-.126-.176.126c-.023.016-.054-.006-.045-.033l.065-.207-.174-.128c-.023-.017-.011-.053.017-.053l.217-.002.068-.205c.01-.027.047-.027.056 0zM5.388 4.356l.068.206.217.002c.028 0 .04.036.017.052l-.174.13.065.206c.009.026-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.054-.006-.045-.032l.065-.207-.174-.129c-.023-.016-.011-.052.017-.052l.217-.002.068-.206c.01-.026.047-.026.056 0zM6.223.581l.068.206.217.002c.028 0 .04.036.017.052L6.35.97l.065.207c.008.026-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.054-.006-.045-.032L6.039.97 5.865.841C5.842.825 5.854.79 5.882.79l.217-.002.068-.206c.009-.026.047-.026.056 0zM6.223 1.657l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.008.027-.022.05-.045.033l-.176-.126-.176.126c-.023.016-.054-.006-.045-.033l.065-.206-.174-.13c-.023-.016-.011-.052.017-.052l.217-.001.068-.206c.009-.027.047-.027.056 0zM6.223 2.732l.068.206.217.002c.028 0 .04.036.017.052l-.174.13.065.206c.008.027-.022.049-.045.032l-.176-.126-.176.126c-.023.017-.054-.005-.045-.032l.065-.207-.174-.129c-.023-.016-.011-.052.017-.052l.217-.002.068-.206c.009-.026.047-.026.056 0zM6.223 3.808l.068.206.217.001c.028 0 .04.036.017.053l-.174.129.065.206c.008.027-.022.05-.045.033l-.176-.126-.176.126c-.023.016-.054-.006-.045-.033l.065-.206-.174-.129c-.023-.017-.011-.052.017-.053l.217-.001.068-.206c.009-.027.047-.027.056 0zM7.057.054l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033L7.03.556l-.177.126C6.831.698 6.8.676 6.81.649l.065-.206L6.7.313c-.023-.016-.011-.052.017-.052L6.933.26l.069-.206c.009-.027.046-.027.055 0zM7.057 1.13l.069.205.217.002c.028 0 .04.036.017.053l-.175.128.066.207c.008.027-.022.049-.045.032l-.176-.126-.177.126c-.022.017-.053-.005-.044-.032l.065-.207L6.7 1.39c-.023-.017-.011-.053.017-.053l.216-.002.069-.205c.009-.027.046-.027.055 0zM7.057 2.205l.069.206.217.001c.028 0 .04.036.017.053l-.175.129.066.206c.008.027-.022.05-.045.033l-.176-.126-.177.126c-.022.016-.053-.006-.044-.033l.065-.206-.174-.129c-.023-.017-.011-.052.017-.053l.216-.001.069-.206c.009-.026.046-.026.055 0zM7.057 3.28l.069.206.217.002c.028 0 .04.036.017.053l-.175.128.066.207c.008.027-.022.049-.045.033l-.176-.126-.177.126c-.022.016-.053-.006-.044-.033l.065-.207-.174-.128c-.023-.017-.011-.053.017-.053l.216-.002.069-.205c.009-.027.046-.027.055 0zM7.057 4.356l.069.206.217.002c.028 0 .04.036.017.052l-.175.13.066.206c.008.026-.022.049-.045.032l-.176-.126-.177.126c-.022.017-.053-.006-.044-.032l.065-.207-.174-.129c-.023-.016-.011-.052.017-.052l.216-.002.069-.206c.009-.026.046-.026.055 0z" transform="translate(4 4) translate(3 6) translate(.491 .667)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/container/Home.js

@@ -19,13 +19,15 @@ import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
 
 import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-    Link,
-    useParams,
-    useRouteMatch
-  } from "react-router-dom";
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  useParams,
+  useRouteMatch
+} from "react-router-dom";
+import Images from '../assets/Images';
+import { FadeMenu, Footer } from '../Utils/Index';
 
 const drawerWidth = 240;
 
@@ -115,9 +117,9 @@ export default function MiniDrawer() {
           [classes.appBarShift]: open,
         })}
       >
-        <Toolbar>
+        <Toolbar style={{ flex: 1, backgroundColor: 'white' }}>
           <IconButton
-            color="inherit"
+            color="default"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
@@ -127,9 +129,21 @@ export default function MiniDrawer() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" noWrap>
-            Mini variant drawer
-          </Typography>
+          <div style={{ backgroundColor: 'white', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
+              <div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
+              <Typography style={{ color: 'black' }}>Tommy</Typography>
+              {/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
+              <FadeMenu />
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 10, paddingLeft: 10, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
+              <img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
+              <img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
+              <Typography style={{ color: 'black' }}>EN</Typography>
+            </div>
+          </div>
         </Toolbar>
       </AppBar>
       <Drawer
@@ -169,36 +183,38 @@ export default function MiniDrawer() {
           ))}
         </List>
       </Drawer>
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
-        <Switch>
+      <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between' }}>
+        <div>
+          <div className={classes.toolbar} />
+          <Switch>
             <Route exact path={path}>
-                <h3>Please select a topic.</h3>
+              <h3>Please select a topic.</h3>
             </Route>
             <Route path={`${path}/:topicId`}>
               <Topic />
             </Route>
-        </Switch>
-        <div style={{height: 100, width: '100%', backgroundColor: 'red', justifyContent:'flex-end'}}>
-
+          </Switch>
         </div>
-      </main>
+        <Footer>
+          <span>footer content</span>
+        </Footer>
+      </div>
     </div>
   );
 }
 
 function Topic() {
-    // The <Route> that rendered this component has a
-    // path of `/topics/:topicId`. The `:topicId` portion
-    // of the URL indicates a placeholder that we can
-    // get from `useParams()`.
-    let { topicId } = useParams();
-    React.useEffect(() => {
-      alert(topicId)
-    })
-    return (
-      <div>
-        <h3>{topicId}</h3>
-      </div>
-    );
-  }
+  // The <Route> that rendered this component has a
+  // path of `/topics/:topicId`. The `:topicId` portion
+  // of the URL indicates a placeholder that we can
+  // get from `useParams()`.
+  let { topicId } = useParams();
+  React.useEffect(() => {
+    alert(topicId)
+  })
+  return (
+    <div>
+      <h3>{topicId}</h3>
+    </div>
+  );
+}
\ No newline at end of file