pushhh

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/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>
-    );
-  }
\ No newline at end of file
+  // 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