Commit 78d470ae authored by Deni Rinaldi's avatar Deni Rinaldi

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

dikit dulu

See merge request !4
parents c13028b3 3ea57b8b
......@@ -7,6 +7,9 @@ const Images = {
logout: require('./setting.png'),
setting: require('./logout.png'),
//Image
triputra: require('./triputra.png'),
}
export default Images
\ No newline at end of file
......@@ -29,8 +29,9 @@ import {
import Images from '../assets/Images';
import { FadeMenu, Footer } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
const drawerWidth = 240;
const drawerWidth = 307;
const useStyles = makeStyles((theme) => ({
root: {
......@@ -68,6 +69,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#0d2846'
},
drawerClose: {
transition: theme.transitions.create('width', {
......@@ -79,6 +81,7 @@ const useStyles = makeStyles((theme) => ({
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
},
backgroundColor: '#0d2846'
},
toolbar: {
display: 'flex',
......@@ -88,10 +91,22 @@ const useStyles = makeStyles((theme) => ({
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
toolbarDrawer: {
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
// ...theme.mixins.toolbar
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
orangeAvatar: {
margin: 10,
color: '#fff',
backgroundColor: 'black',
},
}));
export default function MiniDrawer() {
......@@ -160,12 +175,33 @@ export default function MiniDrawer() {
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c6ea',
height: open ? 152 : 68
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon color={"white"} /> : <ChevronLeftIcon color={"white"} />}
</IconButton>
</div>
{open &&
<div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold'}}>John Doe</Typography>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10}}>john@tia.com</Typography>
</div>
}
</div>
<Divider />
{open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}>
<div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
</div>
</div>
</div>
}
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
......
import React, { Component } from 'react';
class Profile extends Component {
render() {
return (
<div> textInComponent </div>
);
}
}
export default Profile;
......@@ -9,6 +9,7 @@ import {
import Home from '../container/Home'
import Login from '../container/Login'
import Register from '../container/Register'
import Profile from '../container/Profile'
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
......@@ -53,6 +54,9 @@ export default function BasicExample() {
<Route path="/register">
<Register />
</Route>
<Route path="/profile">
<Profile />
</Route>
<Route path="*">
<NoMatch />
</Route>
......
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