Updaded Dashboard navigation

locales/en/translations.json

@@ -97,6 +97,7 @@
   "dashboard": {
     "p": {
       "dashboard": {
+        "dashboard": "Dashboard",
         "title": "My Dashboard",
         "subtitle": "Manage data published on Genesys"
       }

src/translations.json

@@ -96,6 +96,7 @@
   "dashboard": {
     "p": {
       "dashboard": {
+        "dashboard": "Dashboard",
         "title": "My Dashboard",
         "subtitle": "Manage data published on Genesys"
       }

src/ui/layout/AdminLayout.tsx

@@ -59,7 +59,7 @@ const ADMIN_MENUS = [
 
 const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
   <div className="admin-layout">
-    <TopNavigation menuItems={ ADMIN_MENUS } location={ location }/>
+    <TopNavigation menuItems={ ADMIN_MENUS } location={ location } root={ route.path } title={ 'admin.admin' }/>
     { renderRoutes(route.routes, match.path) }
   </div>
 );

src/ui/layout/DashboardLayout.tsx

 import * as React from 'react';
 import { translate } from 'react-i18next';
-// import DescriptorIcon from '@material-ui/icons/Description';
-import DescriptorListIcon from '@material-ui/icons/List';
-import AccountBoxIcon from '@material-ui/icons/AccountBox';
-
-import PageLayout from './PageLayout';
-import MenuItem from 'ui/common/Menu';
 
 import renderRoutes from 'ui/renderRoutes';
+import TopNavigation from './headers/v1/NavigationBar';
 
-const DashboardMenu = ({t}) => (
-  <div>
-    <MenuItem label={ t('user.dashboard.menu.profile') } to="/dashboard/profile" icon={ <AccountBoxIcon/> }>
-      <MenuItem label={ t('user.dashboard.menu.userProfile') } to="/dashboard/profile"/>
-      <MenuItem label={ t('user.dashboard.menu.changePassword') } to="/dashboard/profile/password" />
-    </MenuItem>
-    <MenuItem label={ t('subsets.dashboard.menu.subsets') } to="/dashboard/subsets" icon={ <DescriptorListIcon/> }>
-      <MenuItem label={ t('subsets.dashboard.menu.listSubsets') } to="/dashboard/subsets"/>
-      <MenuItem label={ t('subsets.dashboard.menu.createSubsets') } to="/dashboard/subsets/edit" />
-    </MenuItem>
-  </div>
-);
+const DASHBOARD_MENUS = [
+  {
+    to: '/dashboard/profile',
+    label: 'user.dashboard.menu.profile',
+    subMenus: [
+      {
+        to: '/dashboard/profile',
+        label: 'user.dashboard.menu.userProfile',
+      },
+      {
+        to: '/dashboard/profile/password',
+        label: 'user.dashboard.menu.changePassword',
+      },
+    ],
+  },
+  {
+    to: '/dashboard/subsets',
+    label: 'subsets.dashboard.menu.subsets',
+    subMenus: [
+      {
+        to: '/dashboard/subsets',
+        label: 'subsets.dashboard.menu.listSubsets',
+      },
+      {
+        to: '/dashboard/subsets/edit',
+        label: 'subsets.dashboard.menu.createSubsets',
+      },
+    ],
+  },
+];
 
-const Layout = ({route, match, t}: { route: any, match: any, t: any}) => (
-  <PageLayout sidebar={ <DashboardMenu t={ t }/> }>
+const Layout = ({route, match, t, location}: { route: any, match: any, t: any, location: any}) => (
+  <div>
+    <TopNavigation menuItems={ DASHBOARD_MENUS } location={ location } root={ route.path } title={ 'dashboard.p.dashboard.dashboard' } color={ 'White' }/>
     { renderRoutes(route.routes, match.path) }
-  </PageLayout>
+  </div>
 );
 
 export default translate()(Layout);

src/ui/layout/headers/v1/MenuBar.tsx

@@ -21,12 +21,13 @@ interface IMenuBarProps extends React.ClassAttributes<any> {
   t: any;
   location: any;
   menuItems: object[];
+  color?: string;
 }
 
 class MenuBar extends React.Component<IMenuBarProps, any> {
 
   private renderMenu = (path: any) => {
-    const { t, location } = this.props;
+    const { t, location, color } = this.props;
     return (
       path.subMenus ? (
         <MenuItem
@@ -35,6 +36,7 @@ class MenuBar extends React.Component<IMenuBarProps, any> {
           active={ location.pathname === path.to || path.subMenus.some((subMenu) => subMenu.to === location.pathname) }
           key={ path.to }
           children={ path.subMenus.map(this.renderSubMenu) }
+          color={ color || 'white' }
         />
       ) : (
         <MenuItem

src/ui/layout/headers/v1/MenuItem.tsx

@@ -7,7 +7,6 @@ import Collapse from '@material-ui/core/Collapse/Collapse';
 /*tslint:disable*/
 const style = (theme) => ({
   menuItem: {
-    backgroundColor: '#fff',
     height: '100%',
     position: 'relative' as 'relative',
     overflowX: 'visible' as 'visible',
@@ -17,7 +16,7 @@ const style = (theme) => ({
     transition: 'all 0.1s',
   },
   hover: {
-    backgroundColor: '#eeede7',
+    backgroundColor: 'rgba(0, 0, 0, 0.07)', // '#eeede7',
     borderBottom: 'solid 4px #929292',
   },
   menuLink: {
@@ -47,11 +46,14 @@ const style = (theme) => ({
       height: '3rem',
       borderTop: 'solid 1px transparent',
       borderBottom: 'solid 1px #929292',
-      backgroundColor: '#eeede7',
+      backgroundColor: 'rgba(0, 0, 0, 0.07)', // '#eeede7',
       transition: 'all 0.1s',
       '&:hover': {
-        backgroundColor: '#c3c0b0',
+        backgroundColor: 'rgba(0, 0, 0, 0.245)', //'#c3c0b0',
       },
+      '& > a': {
+        whiteSpace: 'nowrap' as 'nowrap',
+      }
     },
     borderBottom: 'solid 2px #b7b5b2',
   },
@@ -64,9 +66,9 @@ const style = (theme) => ({
     borderBottom: 'solid 4px #5a9d32',
   },
   activeSub: {
-    backgroundColor: '#c3c0b0!important',
+    backgroundColor: 'rgba(0, 0, 0, 0.245)!important', // '#c3c0b0',
     '&:hover': {
-      backgroundColor: '#938f81!important'
+      backgroundColor: 'rgba(0, 0, 0, 0.43)!important'// '#938f81'
     }
   },
 });
@@ -81,6 +83,7 @@ interface IMenuItemProps extends React.ClassAttributes<any> {
   t?: any;
   active?: boolean;
   activeSub?: boolean;
+  color?: string;
 }
 
 class MenuItem extends React.Component<IMenuItemProps, any> {
@@ -101,7 +104,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> {
   private closeMenu = () => this.toggleDrawer(false);
 
   public render() {
-    const {to, label, children, classes, t, activeSub, active} = this.props;
+    const {to, label, children, classes, t, activeSub, active, color} = this.props;
     return (
       <div
         className={ `${classes.menuItem} ${this.state.open && classes.hover} ${ active && classes.active } ${ activeSub && classes.activeSub}` }
@@ -114,7 +117,7 @@ class MenuItem extends React.Component<IMenuItemProps, any> {
         </Link>
         { children &&
         <Collapse className={ classes.collapsed } in={ this.state.open }>
-          <div className={ `${classes.children} ${this.state.open && classes.open}` }>
+          <div className={ `${classes.children} ${this.state.open && classes.open}` } style={ {backgroundColor: `${color || 'white'}`} }>
             { children }
           </div>
         </Collapse>

src/ui/layout/headers/v1/MobileNavigation.tsx

@@ -77,6 +77,7 @@ const styleSheet = (theme) => ({
     lineHeight: '36px',
     color: '#000!important',
     paddingLeft: '36px',
+    paddingRight: '24px',
     width: '100%',
     borderTop: 'solid 1px #929292',
     boxSizing: 'border-box' as 'border-box',

src/ui/layout/headers/v1/NavigationBar.tsx

@@ -29,7 +29,7 @@ const styleSheet = (theme) => ({
     flex: 1,
   },
   headerRoot: {
-    backgroundColor: '#fff',
+    // backgroundColor: '#fff',
     height: 'auto',
     [theme.breakpoints.down('md')]: {
       height: '3.5rem',
@@ -64,7 +64,7 @@ const styleSheet = (theme) => ({
     fontSize: '8.5px',
     fontWeight: 'bold' as 'bold',
     textAlign: 'center' as 'center',
-    color: '#fff',
+    // color: '#fff',
   },
   iconBackground: {
     backgroundColor: '#88B941',
@@ -150,10 +150,12 @@ interface IHeaderProps extends React.ClassAttributes<any> {
   t: any;
   menuItems: object[];
   location: any;
+  root: any;
+  title: string;
+  color?: string;
 }
 
 class AdminHeader extends React.Component<IHeaderProps | any, any> {
-
   public constructor(props: any) {
     super(props);
 
@@ -193,16 +195,19 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
 
   public render() {
 
-    const {classes, t, menuItems, location} = this.props;
+    const {classes, t, menuItems, location, root, title, color} = this.props;
+    const menuColor = color || 'white';
     return (
       <div className={ `header-bar ${ classes.headerMargin }` }>
-        <AppBar position="fixed" className={ classes.headerRoot }>
+        <AppBar position="fixed" className={ classes.headerRoot } style={ {backgroundColor: `${menuColor}`} }>
           <Toolbar className={ classes.blockHeader }>
             <div className="mobile-navigation-block">
               <div className={ classes.menuWrapper }>
                 <IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary"
                             onClick={ this.handleLeftMenuOpen }>
-                  <img src="images/GENESYS-ICON_white.svg" className={ classes.logoIcon }/>
+                  <svg className={ classes.logoIcon } style={ {fill: `${menuColor}`} }>
+                    <use xlinkHref="images/GENESYS-ICON.svg#Layer_1"/>
+                  </svg>
                 </IconButton>
               </div>
 
@@ -213,14 +218,18 @@ class AdminHeader extends React.Component<IHeaderProps | any, any> {
             <div className={ classes.underlinedLogo }>
               <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>
+                  <svg className={ classes.mainIcon } style={ {fill: `${menuColor}`} }>
+                    <use xlinkHref="images/GENESYS-ICON.svg#Layer_1"/>
+                  </svg>
+                  <div className={ classes.iconBack } style={ {color: `${menuColor}`} }>
+                    { t('common:action.backTo', { where: t('admin.genesys') }).toUpperCase() }
+                  </div>
                 </div>
               </Link>
-              <Link to="/admin/"><div className={ classes.admin }>{ t('admin.admin') }</div></Link>
+              <Link to={ root }><div className={ classes.admin }>{ t(title) }</div></Link>
             </div>
             <div className={ `${classes.flex} ${this.props.classes.navWrapper}` }>
-              <MenuBar t={ t } location={ location } menuItems={ menuItems }/>
+              <MenuBar t={ t } location={ location } menuItems={ menuItems } color={ menuColor }/>
               <div
                 className={ `float-right` }>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
               <div>