revamp layout (sidebar&topbar)

src/containers/DefaultLayout/DefaultHeader.js

@@ -44,7 +44,6 @@ class DefaultHeader extends Component {
 
 
   componentDidMount() {
-    this.getLogo();
     this.getHeaderMenu();
   }
 
@@ -120,37 +119,6 @@ class DefaultHeader extends Component {
     }
   }
 
-  getLogoImage = () => {
-    let img = <img style={{ width: '100%', height: '100%' }} src={logo_header_adw} />
-    switch (APP_MODE) {
-      case 'KIT':
-        img = <img style={{ width: '100%', height: '100%' }} src={logo_header_kit} />
-        break;
-      case 'NAWAKARA':
-        img = <img style={{ width: '32%', height: '32%', display: 'flex', justifyContent: 'center' }} src={logo_header_nawakara} />
-        break;
-      case 'ADW':
-        img = <div style={{ fontWeight: 'bold', fontSize: 30, fontFamily: 'Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif', textAlign: 'center', marginLeft: 25, marginRigth: 20 }}><span style={{ color: '#4472C4' }}>OS</span><span style={{ color: '#ED7D31' }}>PRO</span></div>
-        break;
-      default:
-        img = <img style={{ width: '100%', height: '100%' }} src={logo_header_adw} />
-    }
-    return img;
-  }
-
-  getLogo = () => {
-
-    return (
-      <div style={{ width: '10%', ...APP_MODE == "NAWAKARA" && { display: 'flex', justifyContent: 'center' } }}>
-        {/* <div style={{fontWeight: 'bold', fontSize: 30, fontFamily: 'Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif', textAlign: 'center', marginLeft: 25, marginRigth: 20}}> */}
-        {/* <span style={{color: '#4472C4'}}>OS</span><span style={{color: '#ED7D31'}}>PRO</span> */}
-        {this.getLogoImage()}
-        {/* adw w= 100, kit w = 100, nawakara w= 40 */}
-        {/* <span style={{color: '#000000', fontSize:'18px', fontWeight:'bold'}}>PROJECT</span> */}
-      </div>
-    )
-  }
-
   dropDownMenu = () => {
     const { dataAlert, totalAlert } = this.state
     let dataAlertLength = dataAlert.length
@@ -282,57 +250,13 @@ class DefaultHeader extends Component {
 
     return (
       <React.Fragment>
-        <AppSidebarToggler className="d-lg-none" display="md" mobile />
-        {/*<AppNavbarBrand
-          full={{ src: logo, width: 89, height: 35, alt: 'SIOPAS Logo' }}
-          minimized={{ src: logo, width: 30, height: 35, alt: 'SIOPAS Logo' }}
-        />*/}
-        {this.getLogo()}
-        {/*<AppNavbarBrand
-          full={{ src: logo_bmd_denpasar, width: 125, height: 30, alt: 'SIOPAS Logo' }}
-          minimized={{ src: logo_bmd_denpasar, width: 35, height: 30, alt: 'SIOPAS Logo' }}
-        />*/}
-        <AppSidebarToggler className="d-md-down-none" display="lg" />
-
-        {this.getHeaderMenu()}
-
         <Nav className="ml-auto" navbar>
-
           <Dropdown onVisibleChange={(visible) => this.onReadNotif(visible)} overlay={this.dropDownMenu} trigger={['click']}>
             <NavItem className="d-md-down-none">
               <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color={this.state.totalAlert > 0 ? "danger" : "default"}>{this.state.totalAlert > 0 ? this.state.totalAlert : null}</Badge></NavLink>
             </NavItem>
           </Dropdown>
-          {/* <NavItem className="d-md-down-none">
-            <NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
-          </NavItem>
-          <NavItem className="d-md-down-none">
-            <NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
-          </NavItem> */}
-          <UncontrolledDropdown nav direction="down">
-            <DropdownToggle nav>
-              <img src={user_logo} className="img-avatar" alt="siopas_user" />
-            </DropdownToggle>
-            <DropdownMenu right>
-              {/*<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>*/}
-              {/* <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
-              <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
-              <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
-              <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
-              <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem> */}
-              {/*<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>*/}
-              {/* <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
-              <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
-              <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
-              <DropdownItem divider />
-              <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem> */}
-              <DropdownItem header tag="div" className="text-center">{localStorage.getItem('user_name')}</DropdownItem>
-              <DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
         </Nav>
-        {/* <AppAsideToggler className="d-md-down-none" /> */}
-        {/*<AppAsideToggler className="d-lg-none" mobile />*/}
       </React.Fragment>
     );
   }

src/containers/DefaultLayout/DefaultLayout.js

@@ -1,4 +1,4 @@
-import React, { Component, Suspense } from 'react';
+import React, { Component, Suspense, Divider } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import * as router from 'react-router-dom';
 import { Container } from 'reactstrap';
@@ -233,13 +233,23 @@ class DefaultLayout extends Component {
 			<div className="app">
 				<div className="app-body">
 					<AppSidebar minimized={true} fixed display="lg">
+						{/* <div class="sidebar-header"> */}
+						{/* 	<Suspense fallback={this.loading()}> */}
+						{/* 		<DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} /> */}
+						{/* 	</Suspense> */}
+						{/* </div> */}
+						<hr/>
 						<AppSidebarHeader />
 						<AppSidebarForm />
 						<Suspense>
-
 							{this.getMenu()}
 						</Suspense>
 						<AppSidebarFooter />
+						<li class="nav-item">
+							<a class="nav-link" onClick={e => this.signOut(e)}>
+								<i class="nav-icon fa fa-sign-out"></i> Logout
+							</a>
+						</li>
 						<AppSidebarMinimizer />
 					</AppSidebar>
 					<main className="main">

src/scss/_custom.scss

@@ -26,6 +26,11 @@
 	background-color: #192a38 !important;
 }
 
+.nav-item > .active {
+	background-color: #192a38 !important;
+}
+
+
 .breadcrumb {
 	padding: 0.1rem 1rem;
 	margin-bottom: 1.25rem;