update sidebar

src/container/Home.js

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

src/container/UserRole.js

+import React, { Component } from 'react';
+
+export default class componentName extends Component {
+  render() {
+    return (
+      <div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div>
+    );
+  }
+}

src/index.js

 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';
 

src/library/Array.js

+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

src/router/homeRoutes.js

 import screen404 from '../container/Screen404'
 import Beranda from '../container/Beranda'
+import UserRole from '../container/UserRole'
 
 const routes = [
     {
@@ -7,8 +8,8 @@ const routes = [
       main: Beranda
     },
     {
-      path: "/home/screen404",
-      main: screen404
+      path: "/home/userrole",
+      main: UserRole
     },
   ];
 

src/router/index.js

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