import React from 'react';
import Icon from 'react-fa';

const styles = {
  navbar: { position: 'fixed', top: '0', zIndex: '5', width: '100%', background: 'white', padding: '3px', height: '33px' },
  navlink: { padding: '3px' }
};

class Navbar extends React.Component {
  static propTypes = {
    path: React.PropTypes.string.isRequired,
    words: React.PropTypes.number.isRequired,
    onCreate: React.PropTypes.func.isRequired,
    onOpen: React.PropTypes.func.isRequired,
    onSave: React.PropTypes.func.isRequired
  };

  render() {
    return (
      <nav style={styles.navbar}>
        <div className="is-pulled-left">
          <p className="is-inline">
            <a style={styles.navlink} onClick={this.props.onCreate}>
              <Icon name="file-o" />
            </a>
          </p>

          <p className="is-inline">
            <a style={styles.navlink} onClick={this.props.onSave}>
              <Icon name="save" />
            </a>
          </p>

          <p className="is-inline">
            <a style={styles.navlink} onClick={this.props.onOpen}>
              <Icon name="folder-open-o" />
            </a>
          </p>

          <p className="is-inline is-unselectable">
            { this.props.path === '' ? ' New File' : this.props.path }
          </p>
        </div>

        <div className="is-pulled-right is-unselectable">
          { this.props.words ? <p className="is-inline">{this.props.words} words</p> : '0 words '}
        </div>
      </nav>
    );
  }
}

export default Navbar;

@@ -48,16 +48,41 @@
 act-fa';
+%0Aimport path from 'path';
 %0A%0Aconst 
@@ -558,16 +558,263 @@
 der() %7B%0A
+    const filePath = this.props.path;%0A    let fileDir;%0A    let fileName;%0A%0A    if (filePath && filePath !== '') %7B%0A      fileDir = path.dirname(filePath);%0A      fileName = path.basename(filePath);%0A    %7D else %7B%0A      fileDir = 'New Document';%0A    %7D%0A%0A
     retu
@@ -1487,66 +1487,169 @@
     
-%7B this.props.path === '' ? ' New File' : this.props.path %7D
+%3Cspan style=%7B%7B color: '#BBB', paddingLeft: '1em' %7D%7D%3E%0A              %7BfileDir%7D%0A              %7Bpath.sep%7D%0A            %3C/span%3E%0A            %3Cstrong%3E%7BfileName%7D%3C/strong%3E
 %0A   

Improve path name display