NavBar reimplemented with the new router

src/common/NavBar/NavBar.js

@@ -1,41 +1,72 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import NavTab from './NavTab';
-import SearchInput from './SearchInput';
-import UserMenu from './UserMenu';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const NavBarButton = require('./NavBarButton');
+const styles = require('./styles');
 
-class NavBar extends PureComponent {
-    render() {
-        return (
-            <nav className={styles['nav-bar']}>
-                {this.props.tabs.map(tab => <NavTab key={tab.to} {...tab} />)}
-                {this.props.title.length > 0 ? <h2 className={styles['nav-title']}>{this.props.title}</h2> : null}
-                {this.props.searchInput ? <SearchInput className={styles['search-input']} /> : null}
-                {this.props.userMenu ? <UserMenu className={styles['user-menu']} /> : null}
-            </nav>
-        );
-    }
-}
+const onBackButtonClick = () => {
+    window.history.back();
+};
+
+const NavBar = ({ backButton, tabs, title, searchInput, userMenu }) => (
+    <nav className={styles['nav-bar']}>
+        {
+            backButton ?
+                <NavBarButton
+                    className={styles['nav-bar-button']}
+                    icon={'ic_back_ios'}
+                    label={'back'}
+                    onClick={onBackButtonClick}
+                />
+                :
+                null
+        }
+        {
+            tabs.length > 0 ?
+                tabs.map(({ href, icon, label }) => (
+                    <NavBarButton
+                        key={href}
+                        className={styles['nav-bar-button']}
+                        href={href}
+                        icon={icon}
+                        label={label}
+                    />
+                ))
+                :
+                <h2 className={styles['title']}>{title}</h2>
+        }
+        {
+            searchInput ?
+                <div className={styles['search-input']} />
+                :
+                null
+        }
+        {
+            userMenu ?
+                <div className={styles['user-menu']} />
+                :
+                null
+        }
+    </nav>
+);
 
 NavBar.propTypes = {
-    tabs: PropTypes.arrayOf(PropTypes.shape({
+    tabs: PropTypes.arrayOf(PropTypes.exact({
         icon: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
-        to: PropTypes.string.isRequired,
-        exact: PropTypes.bool,
-        replace: PropTypes.bool
+        href: PropTypes.string.isRequired
     })).isRequired,
     title: PropTypes.string.isRequired,
+    backButton: PropTypes.bool.isRequired,
     searchInput: PropTypes.bool.isRequired,
     userMenu: PropTypes.bool.isRequired
 };
 
 NavBar.defaultProps = {
-    tabs: [],
+    tabs: Object.freeze([]),
     title: '',
+    backButton: false,
     searchInput: false,
     userMenu: false
 };
 
-export default NavBar;
+module.exports = NavBar;

src/common/NavBar/index.js

@@ -1,3 +1,3 @@
-import NavBar from './NavBar';
+const NavBar = require('./NavBar');
 
-export default NavBar;
+module.exports = NavBar;

src/common/NavBar/styles.less

@@ -1,18 +1,46 @@
+.nav-bar {
+    --nav-bar-height: 44px;
+    font-size: 16px;
+
+    .nav-bar-button {
+        &:nth-of-type(n+4) {
+            display: none;
+        }
+    }
+}
 
-@import 'constants';
 .nav-bar {
     display: flex;
-    height: @nav-bar-height;
+    flex-direction: row;
+    align-items: center;
+    height: var(--nav-bar-height);
     background-color: var(--color-secondarydark);
-    .nav-title {
-        padding: 0 10px;
-        font-size: 16px;
-       color: var(--color-surfacelighter);
+    overflow: hidden;
+
+    .nav-bar-button {
+        max-width: calc(var(--nav-bar-height) * 3.5);
+        height: var(--nav-bar-height);
     }
+
+    .title {
+        flex: 1;
+        height: 1em;
+        padding: 0 0.6em;
+        color: var(--color-surfacelighter);
+        font-size: 1.1em;
+        font-style: normal;
+        font-weight: normal;
+        word-break: break-all;
+        overflow: hidden;
+    }
+
     .search-input {
         flex: 1;
+        height: var(--nav-bar-height);
     }
+
     .user-menu {
-        width: @nav-bar-height;
+        width: var(--nav-bar-height);
+        height: var(--nav-bar-height);
     }
 }