Commit e8d88ecd authored by Matija Obreza's avatar Matija Obreza
Browse files

Updated top navigation: Organized files and renamed properties

parent da432c6d
......@@ -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>
);
......
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);
......@@ -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));
......@@ -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>
......
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