Updated top navigation: Organized files and renamed properties

src/ui/layout/AdminLayout.tsx

@@ -3,7 +3,7 @@ import { translate } from 'react-i18next';
 
 import renderRoutes from 'ui/renderRoutes';
 
-import AdminHeader from 'ui/layout/Header/AdminHeader';
+import TopNavigation from './headers/v1/NavigationBar';
 
 const ADMIN_MENUS = [
   {
@@ -58,7 +58,7 @@ const ADMIN_MENUS = [
 
 const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
   <div className="admin-layout">
-    <AdminHeader pathes={ ADMIN_MENUS } location={ location }/>
+    <TopNavigation menuItems={ ADMIN_MENUS } location={ location }/>
     { renderRoutes(route.routes, match.path) }
   </div>
 );

src/ui/layout/Header/AdminHeaderMenu.tsx → src/ui/layout/headers/v1/MenuBar.tsx

 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import MenuItem from 'ui/layout/Header/AdminHeaderMenuItem';
+import MenuItem from './MenuItem';
 
 const styleSheet = (theme) => ({
   /* tslint:disable */
@@ -16,17 +16,17 @@ const styleSheet = (theme) => ({
   /* tslint:enable */
 });
 
-interface IMenuProps extends React.ClassAttributes<any> {
+interface IMenuBarProps extends React.ClassAttributes<any> {
   classes: any;
   t: any;
   location: any;
-  pathes: object[];
+  menuItems: object[];
 }
 
-class AdminHeaderMenu extends React.Component<IMenuProps, any> {
+class MenuBar extends React.Component<IMenuBarProps, any> {
 
   private renderMenu = (path: any) => {
-    const {t} = this.props;
+    const { t } = this.props;
     return (
       path.subMenus ? (
         <MenuItem
@@ -60,14 +60,14 @@ class AdminHeaderMenu extends React.Component<IMenuProps, any> {
   }
 
   public render() {
-    const {classes, location, pathes} = this.props;
+    const {classes, location, menuItems} = this.props;
     console.log(location.pathname);
     return (
       <nav className={ classes.nav }>
-        { pathes.map(this.renderMenu) }
+        { menuItems.map(this.renderMenu) }
       </nav>
     );
   }
 }
 
-export default withStyles(styleSheet)(AdminHeaderMenu);
+export default withStyles(styleSheet)(MenuBar);

src/ui/layout/Header/AdminLeftMenu.tsx → src/ui/layout/headers/v1/MobileNavigation.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import { translate } from 'react-i18next';
+import { compose } from 'redux';
 
 import Drawer from '@material-ui/core/Drawer';
 import { NavLink } from 'react-router-dom';
@@ -10,7 +11,6 @@ import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { compose } from 'redux';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
 const mobile = ['md', 'sm', 'xs'] as Breakpoint[];
@@ -112,16 +112,16 @@ const styleSheet = (theme) => ({
   /* tslint:enable */
 });
 
-interface ILeftMenuProps extends React.ClassAttributes<any> {
+interface IMobileNavigationProps extends React.ClassAttributes<any> {
   open: any;
   closeMenu: (flag) => any;
   classes: any;
   width: Breakpoint;
   t: any;
-  pathes: any[];
+  menuItems: any[];
 }
 
-class AdminLeftMenu extends React.Component<ILeftMenuProps, any> {
+class MobileNavigation extends React.Component<IMobileNavigationProps, any> {
   public state = {
     expanded: null,
   };
@@ -141,7 +141,7 @@ class AdminLeftMenu extends React.Component<ILeftMenuProps, any> {
   }
 
   public render() {
-    const {pathes, t, classes} = this.props;
+    const {menuItems, t, classes} = this.props;
     const {expanded} = this.state;
 
     const closeBtn = {
@@ -162,7 +162,7 @@ class AdminLeftMenu extends React.Component<ILeftMenuProps, any> {
               <Close style={ closeBtn } onClick={ this.props.closeMenu }/>
             </div>
             <nav className={ classes.nav }>
-              { pathes.map((path) => {
+              { menuItems.map((path) => {
                 const isActive = location.pathname === path.to ||
                   path.subMenus &&
                   path.subMenus.some((subMenu) => subMenu.to === location.pathname);
@@ -217,4 +217,4 @@ class AdminLeftMenu extends React.Component<ILeftMenuProps, any> {
   }
 }
 
-export default translate()(compose(withStyles(styleSheet), withWidth())(AdminLeftMenu));
+export default translate()(compose(withStyles(styleSheet), withWidth())(MobileNavigation));

src/ui/layout/Header/AdminHeader.tsx → src/ui/layout/headers/v1/NavigationBar.tsx

@@ -14,11 +14,11 @@ import IconButton from '@material-ui/core/IconButton';
 
 import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 
-import UserLoginMenu from './UserLoginMenu';
-import UserMenu from './UserMenu';
-import AdminLeftMenu from './AdminLeftMenu';
-import LanguageList from './LanguageList';
-import AdminHeaderMenu from 'ui/layout/Header/AdminHeaderMenu';
+import UserLoginMenu from 'ui/layout/Header/UserLoginMenu';
+import UserMenu from 'ui/layout/Header/UserMenu';
+import MobileMenu from './MobileNavigation';
+import MenuBar from './MenuBar';
+import LanguageList from 'ui/layout/Header/LanguageList';
 
 const styleSheet = (theme) => ({
   root: {
@@ -148,7 +148,7 @@ interface IHeaderProps extends React.ClassAttributes<any> {
   history: any;
   classes?: any;
   t: any;
-  pathes: object[];
+  menuItems: object[];
   location: string;
 }
 
@@ -193,7 +193,7 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
 
   public render() {
 
-    const {classes, t, pathes, location} = this.props;
+    const {classes, t, menuItems, location} = this.props;
     return (
       <div className={ `header-bar ${ classes.headerMargin }` }>
         <AppBar position="fixed" className={ classes.headerRoot }>
@@ -206,21 +206,21 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
                 </IconButton>
               </div>
 
-              <AdminLeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } pathes={ pathes }
+              <MobileMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } menuItems={ menuItems }
                              location={ location }/>
             </div>
 
             <div className={ classes.underlinedLogo }>
-              <Link to="/admin" className={ `${this.props.classes.navLogo} ${classes.mobileHidden}` }>
+              <Link to="/" className={ `${this.props.classes.navLogo} ${classes.mobileHidden}` }>
                 <div className={ classes.iconBackground }>
                   <img src="images/GENESYS-ICON_white.svg" className={ classes.mainIcon }/>
                   <div className={ classes.iconBack }>{ t('common:action.backTo', { where: t('admin.genesys') }).toUpperCase() }</div>
                 </div>
               </Link>
-              <div className={ classes.admin }>{ t('admin.admin') }</div>
+              <Link to="/admin/"><div className={ classes.admin }>{ t('admin.admin') }</div></Link>
             </div>
             <div className={ `${classes.flex} ${this.props.classes.navWrapper}` }>
-              <AdminHeaderMenu t={ t } location={ location } pathes={ pathes }/>
+              <MenuBar t={ t } location={ location } menuItems={ menuItems }/>
               <div
                 className={ `float-right` }>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
               <div>