Commit 900cfb9a authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Updaded Dashboard navigation

parent 5a49140c
......@@ -97,6 +97,7 @@
"dashboard": {
"p": {
"dashboard": {
"dashboard": "Dashboard",
"title": "My Dashboard",
"subtitle": "Manage data published on Genesys"
}
......
......@@ -96,6 +96,7 @@
"dashboard": {
"p": {
"dashboard": {
"dashboard": "Dashboard",
"title": "My Dashboard",
"subtitle": "Manage data published on Genesys"
}
......
......@@ -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>
);
......
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);
......@@ -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
......
......@@ -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>
......
......@@ -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',
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment