Skip to content

T
Tia-dev
Commit ab960c98 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

pushhh

parent c674f2b1
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 34 deletions
src/Utils/Index.js 0 → 100644
View file @ ab960c98
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 0 → 100644
View file @ ab960c98
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 0 → 100644
View file @ ab960c98
<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 0 → 100644
View file @ ab960c98
<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
View file @ ab960c98
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment