navbar new

src/common/pages/App/index.js

@@ -9,21 +9,30 @@ import { LINKS } from "../../routes";
 import startcase from "lodash.startcase";
 import Route from "./routes";
 import moment from 'moment';
-import { Icon, Button, Modal, notification } from 'antd';
 import {
-  Divider,
-  Drawer,
-  List,
-  ListItem,
-  IconMenu,
-  IconButton,
-  MenuItem,
+  Icon,
+  Button,
+  Modal,
+  notification
+} from 'antd';
+import {
+  // Divider,
+  // Drawer,
+  // List,
+  // ListItem,
+  // IconMenu,
+  // IconButton,
+  // MenuItem,
   DropDownMenu,
   RaisedButton,
   Paper,
   Dialog,
   Snackbar,
-  Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle, Badge
+  // Toolbar, 
+  // ToolbarGroup, 
+  // ToolbarSeparator, 
+  // ToolbarTitle, 
+  // Badge
 } from 'material-ui';
 import IconUserCircle from 'material-ui/svg-icons/action/account-circle';
 import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
@@ -47,10 +56,39 @@ import WalletComponent from "./WalletComponent";
 import { APP_TYPE } from "../../config/app";
 
 
+//new material ui
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import Badge from '@material-ui/core/Badge';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { withStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import CartIcon from '@material-ui/icons/ShoppingCart';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import CancelIcon from '@material-ui/icons/Cancel';
+import { styles } from './styles';
+
+import Drawer from '@material-ui/core/Drawer';
+// import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+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';
+
 faker.locale = 'id_ID';
 @inject("appstate")
 @observer
-export default class App extends React.Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
     this.props = props;
@@ -72,6 +110,10 @@ export default class App extends React.Component {
         .pathname
         .split('/')
         .map(path => startcase(path)),
+
+      anchorEl: null,
+      mobileMoreAnchorEl: null,
+      left: false,
     };
     this.defaultState = Object.assign({}, this.state);
     this.user = props.appstate.user;
@@ -271,7 +313,34 @@ export default class App extends React.Component {
     });
   };
 
+
+  //new
+  handleProfileMenuOpen = event => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  handleMenuClose = () => {
+    this.setState({ anchorEl: null });
+    this.handleMobileMenuClose();
+  };
+
+  handleMobileMenuOpen = event => {
+    this.setState({ mobileMoreAnchorEl: event.currentTarget });
+  };
+
+  handleMobileMenuClose = () => {
+    this.setState({ mobileMoreAnchorEl: null });
+  };
+
+  toggleDrawerNew = (open) => () => {
+    this.setState({
+      left: open,
+    });
+  };
+
   render() {
+    const { anchorEl, mobileMoreAnchorEl } = this.state;
+    const { classes } = this.props;
 
     const { redirect } = this.state;
     if (redirect) {
@@ -297,28 +366,6 @@ export default class App extends React.Component {
       }
     };
 
-    // ROLE dan Menu
-    // agent, ga ada setting, member, task
-    // if (window && !window.Tawk_API) {
-    //   const script = document.createElement("script");
-    //   (this.settingStore.setting.tawkto_siteid && !this.state.scriptTawkto && this.appstate.userData.role === 'agent') ? (() => {
-    //     const scriptText = document.createTextNode(`
-    //   var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
-    //   (function(){
-    //   var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
-    //   s1.async=true;
-    //   s1.src='https://embed.tawk.to/${this.settingStore.setting.tawkto_siteid}/default';
-    //   s1.charset='UTF-8';
-    //   s1.setAttribute('crossorigin','*');
-    //   s0.parentNode.insertBefore(s1,s0);
-    // })();`);
-    //     script.appendChild(scriptText);
-    //     script.async = true;
-    //     document.body.appendChild(script);
-    //     this.setState({scriptTawkto: true})
-    //   })() : '';
-    // }
-
     const { userData } = this.appstate;
     // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
     // let applicationIcon =  "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
@@ -338,6 +385,145 @@ export default class App extends React.Component {
       // }
       return `${LINKS.ORDER}`;
     }
+
+    const isMenuOpen = Boolean(anchorEl);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+    const renderMenu = (
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMenuOpen}
+        onClose={this.handleMenuClose}
+      >
+        <Link onClick={this
+          .changeRoute
+          .bind(this, '/app/profile')} to={LINKS.PROFILE}>
+          <MenuItem>Profile</MenuItem>
+        </Link>
+        <Link onClick={this
+          .changeRoute
+          .bind(this, '/login')} to={LINKS.LOGIN}>
+          <MenuItem>Sign Out</MenuItem>
+        </Link>
+      </Menu>
+    );
+
+    const renderMobileMenu = (
+      <Menu
+        anchorEl={mobileMoreAnchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMobileMenuOpen}
+        onClose={this.handleMobileMenuClose}
+      >
+        {window.location.pathname.split("/")[2] == "shop" ? (
+          <MenuItem>
+          <IconButton color="inherit">
+            <Badge badgeContent={4} color="secondary">
+              <CartIcon />
+            </Badge>
+          </IconButton>
+          <p>Cart</p>
+        </MenuItem>
+        ) : "" }
+        <MenuItem>
+          <IconButton color="inherit">
+            <Badge badgeContent={11} color="secondary">
+              <NotificationsIcon />
+            </Badge>
+          </IconButton>
+          <p>Notifications</p>
+        </MenuItem>
+        <Link onClick={this
+          .changeRoute
+          .bind(this, '/app/profile')} to={LINKS.PROFILE}>
+        <MenuItem>
+          <IconButton color="inherit">
+            <AccountCircle />
+          </IconButton>
+          <p>Profile</p>
+        </MenuItem>
+        </Link>
+        <Link onClick={this
+          .changeRoute
+          .bind(this, '/login')} to={LINKS.LOGIN}>
+        <MenuItem>
+          <IconButton color="inherit">
+            <CancelIcon />
+          </IconButton>
+          <p>Sign Out</p>
+        </MenuItem>
+        </Link>
+      </Menu>
+    );
+
+    const sideList = (
+      <div className={classes.list}>
+        <div className={classes.backgroundLogo}>
+        <Link onClick={this
+              .changeRoute
+              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
+          <img
+            style={{
+              width: "100%",
+              height: "100%"
+            }}
+            src={applicationIcon} />
+            </Link>
+        </div>
+        <Divider />
+        <List>
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+              className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                className="menuAkun">Home</span></MenuItem></Link>
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+              className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                className="menuAkun">Flight</span></MenuItem></Link>
+
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
+              className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                className="menuAkun">Hotel</span></MenuItem></Link>
+
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
+              className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                className="menuAkun">Car</span></MenuItem></Link>
+
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
+              className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                className="menuAkun">Shop</span></MenuItem></Link>
+
+          <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/vouchers')}
+            to={LINKS.VOUCHERS}
+          ><MenuItem
+            className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
+              className="menuAkun">Vouchers</span></MenuItem></Link>
+
+        </List>
+        <Divider />
+        <List>
+          <div style={{padding:15}}>
+            <a>
+              <WalletComponent />
+            </a>
+          </div>
+        </List>
+      </div>
+    );
+
     return (
       <div className="app-container">
         <Helmet>
@@ -363,15 +549,84 @@ export default class App extends React.Component {
         <DepositDialog />
         <WithdrawDialog />
 
-
-
-        <Toolbar className="toolbarAkunTiket">
+        <div className={classes.root}>
+          <AppBar position="fixed">
+            <Toolbar className={classes.toolbar}>
+              <div className={classes.sectionMobile}>
+              <IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
+                <MenuIcon />
+              </IconButton>
+              </div>
+              <Link onClick={this
+              .changeRoute
+              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
+              <img
+                className={classes.title}
+                style={{
+                  width: 100,
+                  height: 30
+                }}
+                src={applicationIcon} />
+                </Link>
+              <div className={classes.search}>
+                <div className={classes.searchIcon}>
+                  <SearchIcon />
+                </div>
+                <InputBase
+                  placeholder="Search…"
+                  classes={{
+                    root: classes.inputRoot,
+                    input: classes.inputInput,
+                  }}
+                />
+              </div>
+              <div className={classes.grow} />
+              <div className={classes.sectionDesktop}>
+                <WalletComponent />
+                {window.location.pathname.split("/")[2] == "shop" ? (<IconButton color="action" >
+                  <Badge badgeContent={4} color="secondary">
+                    <CartIcon />
+                  </Badge>
+                </IconButton>) : "" }
+                
+                <IconButton color="action">
+                  <Badge badgeContent={17} color="secondary">
+                    <NotificationsIcon />
+                  </Badge>
+                </IconButton>
+                <IconButton
+                  aria-owns={isMenuOpen ? 'material-appbar' : undefined}
+                  aria-haspopup="true"
+                  onClick={this.handleProfileMenuOpen}
+                  color="action"
+                >
+                  <AccountCircle />
+                </IconButton>
+              </div>
+              <div className={classes.sectionMobile}>
+                <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="action">
+                  <MoreIcon />
+                </IconButton>
+              </div>
+            </Toolbar>
+          </AppBar>
+          {renderMenu}
+          {renderMobileMenu}
+        </div>
+        <Drawer open={this.state.left} onClose={this.toggleDrawerNew(false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            onClick={this.toggleDrawerNew(false)}
+            onKeyDown={this.toggleDrawerNew(false)}
+          >
+            {sideList}
+          </div>
+        </Drawer>
+        {/* <Toolbar className="toolbarAkunTiket">
           <ToolbarGroup>
             <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus /></IconButton>
 
-            {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
-                          text={"Store Admin"}/> */}
-
             <Link onClick={this
               .changeRoute
               .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
@@ -383,12 +638,12 @@ export default class App extends React.Component {
                 src={applicationIcon} />
             </Link>
 
-            {/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/}
-            {/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
-            {/*onClick={() => this.toggleDrawer()}>*/}
-            {/*<IconMenus/>*/}
-            {/*</IconButton>*/}
-            {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
+            <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
+            <IconButton className="hide-on-small-only" style={{marginRight: 10}}
+            onClick={() => this.toggleDrawer()}>
+            <IconMenus/>
+            </IconButton>
+             <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
               <Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
@@ -398,15 +653,15 @@ export default class App extends React.Component {
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "environment")}>
               <Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
-            </Button> */}
+            </Button> 
 
-            {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
-            {/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Home</span></MenuItem></Link>*/}
+            <Link onClick={this
+            .changeRoute
+            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+            className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
+            className="menuAkun">Home</span></MenuItem></Link>
 
-            {/* <Link onClick={this
+             <Link onClick={this
                   .changeRoute
                   .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
                   className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
@@ -428,17 +683,17 @@ export default class App extends React.Component {
                   .changeRoute
                   .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
                   className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
-                  className="menuAkun">Shop</span></MenuItem></Link> */}
+                  className="menuAkun">Shop</span></MenuItem></Link> 
 
-            {/* <Link onClick={this
+             <Link onClick={this
                   .changeRoute
                   .bind(this, '/app/vouchers')}
                    to={LINKS.VOUCHERS}
                    ><MenuItem
                   className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
-                  className="menuAkun">Vouchers</span></MenuItem></Link> */}
+                  className="menuAkun">Vouchers</span></MenuItem></Link> 
 
-            {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
+             <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
               <Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
@@ -449,7 +704,7 @@ export default class App extends React.Component {
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "home")}>
               <Icon type="home"/> <span
               className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
-            </Button>  */}
+            </Button>  
 
           </ToolbarGroup>
           <ToolbarGroup>
@@ -476,7 +731,6 @@ export default class App extends React.Component {
                         return (
                           <Link to={onNotifRowClick(item)}>
                             <ListItem
-                              // leftAvatar={<Avatar src="images/ok-128.jpg" />}
                               primaryText={item.notification.title}
                               secondaryText={
                                 <div>
@@ -632,7 +886,7 @@ export default class App extends React.Component {
               </Link>
             </IconMenu>
           </ToolbarGroup>
-        </Toolbar>
+        </Toolbar> */}
 
         <div className="mainContent" style={{
           // paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
@@ -647,3 +901,5 @@ export default class App extends React.Component {
     );
   }
 }
+
+export default withStyles(styles)(App);