first commit

src/components/Header/NavLeftList.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import IconMenu from 'material-ui/IconMenu';
+import MenuItem from 'material-ui/MenuItem';
+import IconButton from 'material-ui/IconButton/IconButton';
+import { hashHistory } from 'react-router';
+import Divider from 'material-ui/Divider';
+import Badge from 'material-ui/Badge';
+import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+
+
+const HeaderIconButtonStyle = {
+  width: '60px',
+  height: '60px'
+};
+
+const listItemStyle = {
+  paddingLeft: '40px' // 36 + 16, algin with sub list
+};
+
+class NavLeftList extends React.Component {
+
+  handleChange = (event, value) => {
+    hashHistory.push(value);
+  }
+
+  render() {
+    return (
+          <div> </div>
+    );
+  }
+}
+
+module.exports = NavLeftList;

src/components/Header/NavRightList.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import IconMenu from 'material-ui/IconMenu';
+import MenuItem from 'material-ui/MenuItem';
+import IconButton from 'material-ui/IconButton/IconButton';
+import { hashHistory } from 'react-router';
+
+const ImgIconButtonStyle = {
+  width: '60px',
+  height: '60px'
+};
+
+const listItemStyle = {
+  paddingLeft: '50px' // 36 + 16, algin with sub list
+};
+
+class NavRightList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      name: '',
+      useruuid: ''
+    }
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange = (event, value) => {
+    hashHistory.push(value);
+  }
+  componentDidMount() {
+    const user = JSON.parse(localStorage.getItem('loggedUser'));
+    if (user) {
+      this.setState(Object.assign(this.state, user));
+    }
+  }
+
+  render() {
+    return (
+      <ul className="list-unstyled float-right">
+        <li>
+
+          <IconMenu
+
+            iconButtonElement={<IconButton style={ImgIconButtonStyle}><img src="assets/images/ic_account_circle_white_48dp_1x.png" alt="" className="rounded-circle img30_30" /></IconButton>}
+            onChange={this.handleChange}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+            targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+            menuStyle={{ minWidth: '150px' }}
+          >
+            <MenuItem
+              onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
+              primaryText="Profile"
+              style={{ fontSize: '14px', lineHeight: '48px' }}
+              innerDivStyle={listItemStyle}
+              leftIcon={<i className="material-icons">account_circle</i>}
+            />
+            <MenuItem
+              onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
+              primaryText="Book Ride"
+              innerDivStyle={listItemStyle}
+              style={{ fontSize: '14px', lineHeight: '48px' }}
+              leftIcon={<i className="material-icons">mode_edit</i>}
+            />
+            <MenuItem
+              onTouchTap={(e) => this.handleChange(e, `/login`)}
+              primaryText="Log Out"
+              innerDivStyle={listItemStyle}
+              style={{ fontSize: '14px', lineHeight: '48px' }}
+              leftIcon={<i className="material-icons">forward</i>}
+            />
+          </IconMenu>
+        </li>
+        <li style={{ marginRight: '10px' }}><h6>{this.state.name}</h6></li>
+      </ul>
+    );
+  }
+}
+
+module.exports = NavRightList;

src/components/Header/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import { Link } from 'react-router';
+import APPCONFIG from 'constants/Config';
+import NavLeftList from './NavLeftList';
+import NavRightList from './NavRightList';
+
+
+class Header extends React.Component {
+  componentDidMount() {
+    const sidebarToggler = this.sidebarBtn;
+    const $sidebarToggler = $(sidebarToggler);
+    const $body = $('#body');
+
+    $sidebarToggler.on('click', (e) => {
+      // _sidebar.scss, _page-container.scss
+      $body.toggleClass('sidebar-mobile-open');
+    });
+  }
+
+  render() {
+    const { isFixedHeader, colorOption } = this.props;
+
+    return (
+      <section className="app-header">
+        <div
+          className={classnames('app-header-inner', {
+            'bg-color-light': ['11', '12', '13', '14', '15', '16', '21'].indexOf(colorOption) >= 0,
+            'bg-color-dark': colorOption === '31',
+            'bg-color-primary': ['22', '32'].indexOf(colorOption) >= 0,
+            'bg-color-success': ['23', '33'].indexOf(colorOption) >= 0,
+            'bg-color-info': ['24', '34'].indexOf(colorOption) >= 0,
+            'bg-color-warning': ['25', '35'].indexOf(colorOption) >= 0,
+            'bg-color-danger': ['26', '36'].indexOf(colorOption) >= 0
+          })}
+        >
+          <div className="hidden-lg-up float-left">
+            <a href="javascript:;" className="md-button header-icon toggle-sidebar-btn" ref={(c) => { this.sidebarBtn = c; }}>
+              <i className="material-icons">menu</i>
+            </a>
+          </div>
+
+          <div className="brand hidden-md-down">
+            <h2><Link to="/">{APPCONFIG.brand}</Link></h2>
+          </div>
+
+          <div className="top-nav-left hidden-md-down">
+            <NavLeftList />
+          </div>
+
+          <div className="top-nav-right">
+            <NavRightList />
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+
+
+const mapStateToProps = state => ({
+  colorOption: state.settings.colorOption,
+  isFixedHeader: state.settings.isFixedHeader
+});
+
+module.exports = connect(
+  mapStateToProps
+)(Header);
+