layout home

src/assets/sass/app.css

+.main-color{
+  background-color: #1a2d3e !important;
+}
+
+.sub-color{
+  background-color: #f0f1f3 !important;
+}
 
 .gradient-purple {
   background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%);
@@ -127,6 +134,18 @@
               padding: 5px 15px;
               border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
               color: #444444; }
+              .active {
+                -webkit-transition: all .25s ease;
+                -moz-transition: all .25s ease;
+                -ms-transition: all .25s ease;
+                -o-transition: all .25s ease;
+                transition: all .25s ease;
+                color: #fff;
+                background-color: #62dafc;
+                border-top-right-radius: 20px;
+                border-bottom-right-radius: 20px;
+              }
+      
 
 .color-white {
   color: #fff; }
@@ -5968,6 +5987,7 @@
   font-size: 10pt;
   text-align: center;
   cursor: pointer;
+  outline: 'none';
   /*&:focus {
   	box-shadow: 0 0 0 4px $pos-color;
   }*/ }

src/container/Beranda.js

@@ -5,7 +5,7 @@ class Beranda extends Component {
     render() {
         return (
             <div style={{ flex: 1 }}>
-                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 20 }}>
+                <div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}>
                     <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                     <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
                 </div>

src/container/BudgetTahunan.js

@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component {
         ]
         return (
             <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
-                <div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                 </div>
                 <div style={{ padding: 20, width: '100%' }}>

src/container/BudgetTahunan/BalanceSheet.js

@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component {
         ]
         return (
             <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
-                <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>

src/container/Home.js

@@ -79,7 +79,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
-    backgroundColor: '#0d2846'
+    backgroundColor: '#f6f7f9'
   },
   drawerClose: {
     transition: theme.transitions.create('width', {
@@ -87,11 +87,11 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     overflowX: 'hidden',
-    width: theme.spacing(7) + 1,
+    width: theme.spacing(3) + 2,
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(9) + 1,
+      width: theme.spacing(7) + 1,
     },
-    backgroundColor: '#0d2846'
+    backgroundColor: '#f6f7f9'
   },
   toolbar: {
     display: 'flex',
@@ -124,6 +124,8 @@ export default function MiniDrawer() {
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState([]);
+  const [selectedIndexs, setSelectedIndexs] = React.useState([]);
+  const [selectedSubIndex, setSelectSub] = React.useState([]);
 
   // React.useEffect(() => {
   //   // 
@@ -137,6 +139,21 @@ export default function MiniDrawer() {
     setOpen(false);
   };
 
+  const resetIndex = () => {
+    setSelectedIndex("")
+    setSelectedIndexs("")
+  }
+
+  const selectSub = (e) => {
+    setSelectSub(e)
+    setSelectedIndex("")
+  }
+
+  const selectIndex = (e) => {
+    setSelectSub("")
+    setSelectedIndex(e)
+  }
+
   let { path, url } = useRouteMatch();
 
   const { height, width } = UseWindowDimensions();
@@ -150,34 +167,6 @@ export default function MiniDrawer() {
           [classes.appBarShift]: open,
         })}
       >
-        <Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            className={clsx(classes.menuButton, {
-              [classes.hide]: open,
-            })}
-          >
-            <MenuIcon />
-          </IconButton>
-          <div style={{ backgroundColor: '#51c6ea', 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: 'white' }}>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: 20, paddingLeft: 20, 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: 'white' }}>EN</Typography>
-            </div>
-          </div>
-        </Toolbar>
       </AppBar>
       <Drawer
         variant="permanent"
@@ -193,16 +182,33 @@ export default function MiniDrawer() {
         }}
       >
         <div className={classes.toolbarDrawer} style={{
-          backgroundColor: '#51c5ea',
-          height: open ? null : 68,
-          paddingBottom: open ? 55 : null
+          backgroundColor: '#1a2d3e',
+          height: open ? null : 78,
+          paddingLeft: open ? null : 55,
+          display: open ? null : 'grid',
+          paddingBottom: open ? 55 : null,
+          alignSelf: open? null : 'center'
         }}>
-          <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}>
-              <ChevronLeftIcon style={{ fill: 'white' }} />
-            </IconButton>
-          </div>
+          {open === true ?
+
+            <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} style={{outline: 'none'}}>
+                <ChevronLeftIcon style={{ fill: 'white' }} />
+              </IconButton>
+            </div> :
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              style={{outline: 'none'}}
+              onClick={handleDrawerOpen}
+              edge="start"
+              className={clsx(classes.menuButton, {
+                [classes.hide]: open,
+              })}
+            >
+              <MenuIcon style={{ fill: 'white' }} />
+            </IconButton>}
           {open &&
             <div style={{ width: '100%' }}>
               <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
@@ -213,57 +219,57 @@ export default function MiniDrawer() {
         <Divider />
         {open &&
           <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
-            <div style={{ width: 90, height: 90, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
-              <div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
+            <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
+              <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
               </div>
 
             </div>
           </div>
         }
         {open &&
-          <div style={{ marginLeft: 20, marginTop: 20 }}>
-            <Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
+          <div style={{ marginLeft: 20, marginTop: 10 }}>
+            <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
           </div>
         }
         <List>
           {ArraySide.map((item, index) => (
-            <div style={{ marginTop: index === 0 ? null : 10 }}>
+            <div style={{ marginTop: index === 0 ? null : 5 }} >
               {item.subItem != null ?
-                <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
-                  <ListItem button key={item.label}>
+                <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndexs == null ? setSelectedIndexs(item.label) : setSelectedIndexs(null)}>
+                  <ListItem key={item.label}>
                     <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
-                    <Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography>
+                    <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                   </ListItem>
-                  {item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null}
+                  {item.subItem != null ? (item.label === selectedIndex ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
                 </div>
                 :
                 item.label === 'Settings' ?
                   open ?
                     <Link to={`${url}/${item.path}`}>
                       <ListItem button key={item.label} onClick={() => null}>
-                        <Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
+                        <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
                       </ListItem>
                     </Link> : null
                   :
                   <Link to={`${url}/${item.path}`}>
-                    <div style={{ paddingLeft: 10 }}>
-                      <ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
-                        <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
-                        <Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography>
+                    <div style={{ paddingLeft: 10 }} className={selectedIndex === item.label ? "active" : ""}>
+                      <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
+                        <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
+                        <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                       </ListItem>
                     </div>
                   </Link>
               }
               {item.subItem != null &&
                 <div>
-                  <Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
+                  <Collapse in={item.label === selectedIndexs} timeout="auto" unmountOnExit>
                     <List component="div" disablePadding>
-                      {item.subItem.map((sub, index) => {
+                      {item.subItem.map((sub, indexs) => {
                         return (
                           <Link to={`${url}/${sub.path}`}>
-                            <div style={{ paddingLeft: 10 }}>
-                              <ListItem style={{ paddingLeft: 57 }}>
-                                <Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{sub.label}</Typography>
+                            <div style={{ paddingLeft: 10, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
+                              <ListItem button style={{ paddingLeft: 61 }}>
+                                <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                               </ListItem>
                             </div>
                           </Link>
@@ -279,7 +285,7 @@ export default function MiniDrawer() {
       </Drawer>
       <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>
-          <div className={classes.toolbar} />
+          {/* <div className={classes.toolbar} /> */}
           <MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
             <Switch>
               {HomeRoutes.map((route, index) => (
@@ -299,9 +305,9 @@ export default function MiniDrawer() {
               ))}
             </Switch>
           </MuiPickersUtilsProvider>
-          <Footer>
+          {/* <Footer>
             <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
-          </Footer>
+          </Footer> */}
         </div>
 
       </div>

src/container/HomePage.js

@@ -84,7 +84,7 @@ class HomePage extends Component {
         }]
         return (
             <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
-                <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>

src/container/Laporan/DashboardCAT.js

@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component {
             { value: '2016', label: '2016' },
         ]
         return (
-            <div style={{}}>
-                <div style={{ backgroundColor: '#354960', padding: 28 }}>
+            <div className='a-s-p-mid no-header'>
+                <div className={"main-color"} style={{ padding: 28 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
                 </div>
                 <div className="padding-20px">

src/container/MasterData/Parameter/Parameter.js

@@ -155,7 +155,7 @@ export default class Parameter extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                 <div>
                     <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                         <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label>

src/container/MasterData/Perusahaan/Perusahaan.js

@@ -263,7 +263,7 @@ export default class Perusahaan extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                 {this.state.visiblePerusahaan === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/ReportItems.js

@@ -113,7 +113,7 @@ export default class ReportItems extends Component {
             <div>
                 {this.state.itemReport === true ?
                     <div style={{ height: this.props.height }}>
-                    <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                    <div className={"main-color"} style={{ height: 199, width: '100%' }} />
                         <div>
                             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                 <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Item Report</label>
@@ -200,7 +200,7 @@ export default class ReportItems extends Component {
                     />
                 :
                 <div style={{ height: this.props.height }}>
-                        <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
+                        <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
                         <div> 
                             <div>
                                 <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/UnitBisnis.js

@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-                <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
                 {this.state.visibleUnitBisnis === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/formReportItems/VisualReportItems.js

@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component {
         return (
             <div>    
                 <div style={{ height: this.props.height }}>
-                    <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
+                    <div style={{ height: 199, width: '100%' }} className={"main-color"} />
                         <div>
                             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                 <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>

src/container/Otorisasi/User.js

@@ -289,7 +289,7 @@ export default class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
-        <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+        <div className={"main-color"} style={{ height: 199, width: '100%' }} />
         {this.state.visibleUser ? <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
             <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>

src/container/Otorisasi/UserRole.js

@@ -178,7 +178,7 @@ class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
-        <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+        <div className={"main-color"} style={{ height: 199, width: '100%' }} />
         <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
             <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>