Commit b4a4a132 authored by Dida Adams Arizona's avatar Dida Adams Arizona

Merge branch 'didam' into 'master'

Didam

See merge request !16
parents 786a5493 0d02d36e
......@@ -10,6 +10,8 @@ import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
......@@ -17,6 +19,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import Collapse from '@material-ui/core/Collapse';
import {
BrowserRouter as Router,
......@@ -31,6 +34,7 @@ import { FadeMenu, Footer } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
import ArraySide from '../library/Array'
const drawerWidth = 307;
......@@ -114,7 +118,11 @@ export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [selectedIndex, setSelectedIndex] = React.useState([]);
React.useEffect(() => {
// alert(ArraySide)
})
const handleDrawerOpen = () => {
setOpen(true);
};
......@@ -203,25 +211,52 @@ export default function MiniDrawer() {
</div>
</div>
}
{open &&
<div style={{marginLeft: 25, marginTop: 20, marginBottom: 20}}>
<Typography style={{color: 'white', fontSize: 12}}>APLIKASI</Typography>
</div>
}
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/beranda`}><InboxIcon /></Link> : <Link to={`${url}/screen404`}><MailIcon /></Link>}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
{ArraySide.map((item, index) => (
<div>
{item.subItem != null?
<div style={{justifyContent:'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10}} onClick={() => selectedIndex == 0? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
{item.subItem != null? (index === selectedIndex? <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
</div>
:
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
</Link>
}
{item.subItem != null &&
<div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, index) => {
return (
<Link to={`${url}/${sub.path}`}>
<ListItem style={{paddingLeft: 70}}>
<Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography>
</ListItem>
</Link>
)
})}
</List>
</Collapse>
</div>
}
</div>
))}
</List>
</Drawer>
<div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
<Switch>
......@@ -249,20 +284,4 @@ export default function MiniDrawer() {
</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
import React, { Component } from 'react';
export default class componentName extends Component {
render() {
return (
<div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div>
);
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/font-awesome/css/font-awesome.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
......
const arraySide = [
{
img: '',
label: 'Beranda',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Budget Tahunan',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Laporan Bulanan',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Manajemen Dokumen',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Laporan',
path: '',
subItem: [
{
img: 'beranda',
label: 'Dashboard CAT',
path: 'beranda',
},
{
img: 'beranda',
label: 'Report Summary Triputra Group',
path: 'beranda',
},
{
img: '',
label: 'Report Sub Holding',
path: 'beranda',
}
]
},
{
img: '',
label: 'PENGATURAN',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Master Data',
path: '',
subItem: [
{
img: '',
label: 'Unit Bisnis',
path: 'beranda',
},
{
img: '',
label: 'Perusahaan',
path: 'beranda',
},
{
img: '',
label: 'Item Laporan',
path: 'beranda',
},
{
img: '',
label: 'Manajemen Laporan',
path: 'beranda',
},
{
img: '',
label: 'Parameter Lainnya',
path: 'beranda',
},
]
},
{
img: '',
label: 'Otorisasi',
path: '',
subItem: [
{
img: '',
label: 'User Role',
path: 'userrole',
},
{
img: '',
label: 'User',
path: 'beranda',
}
]
},
{
img: '',
label: 'Approvalz Matrix',
path: 'beranda',
subItem: null
}
]
export default arraySide;
\ No newline at end of file
import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import HomePage from '../container/HomePage';
import UserRole from '../container/UserRole'
const routes = [
{
......@@ -8,8 +8,8 @@ const routes = [
main: HomePage
},
{
path: "/home/screen404",
main: screen404
path: "/home/userrole",
main: UserRole
},
];
......
......@@ -34,11 +34,31 @@ export default function BasicExample() {
</Route>
<Route path="/login" component={Login} />
<Route path="/register" component={Register}/>
<Route path="/home" component={Home} />
<PrivateRoute path="/home" component={Home} />
<Route path="*">
<Screen404 />
</Route>
</Switch>
</Router>
);
}
function PrivateRoute({ children, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
// fakeAuth.isAuthenticated ? (
// children
// ) : (
<Redirect
to={{
pathname: "/login",
// state: { from: location }
}}
/>
// )
}
/>
);
}
\ 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