dikit dulu

src/assets/Images.js

@@ -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

src/container/Home.js

@@ -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}>
+        <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 /> : <ChevronLeftIcon />}
+              {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}>

src/container/Profile.js

+import React, { Component } from 'react';
+
+class Profile extends Component {
+  render() {
+    return (
+      <div> textInComponent </div>
+    );
+  }
+}
+
+export default Profile;

src/router/index.js

@@ -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>