Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DOJOT-84] - New Menu #207

Merged
merged 2 commits into from
Aug 19, 2022
Merged

[DOJOT-84] - New Menu #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd0ed98
change app menu and app header
Aug 17, 2022
6bcc42b
remove unused code
Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions MFE/common/src/components/Containers/ContentContainer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import React from 'react';
import { Drawer } from 'Components/Drawer';

import { MENU_ITEMS } from '../../../menu';

import { useStyles } from '../RootContainer/style';

const Index = props => {
const classes = useStyles();
const { children } = props;
return <div className={classes.content}>{children}</div>;
const { children, isMenuOpen } = props;
return (
<div className={classes.content}>
<Drawer isOpen={isMenuOpen} menuItems={MENU_ITEMS} />
{children}
</div>
);
};

export default Index;
3 changes: 2 additions & 1 deletion MFE/common/src/components/Containers/RootContainer/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) => ({
export const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flex: 1,
Expand All @@ -10,5 +10,6 @@ export const useStyles = makeStyles((theme) => ({
flexGrow: 1,
width: '50%',
position: 'relative',
display: 'flex',
},
}));
278 changes: 139 additions & 139 deletions MFE/common/src/components/Drawer/Drawer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useState } from 'react';

import {
Drawer,
ListItemIcon,
ListItemText,
MenuItem,
MenuList,
Collapse,
Drawer,
ListItemIcon,
ListItemText,
MenuItem,
MenuList,
Collapse,
} from '@material-ui/core';
import { ExpandMore, ExpandLess } from '@material-ui/icons';
import darkLogo from 'Assets/images/dojotLogo.png';
Expand All @@ -19,146 +19,146 @@ import { Link, withRouter, useHistory } from 'react-router-dom';
import { useStyles } from './style';

const DrawerComponent = ({ isOpen, menuItems, location }) => {
const { t } = useTranslation('menu');
const history = useHistory();
const classes = useStyles();

const [collapsedItems, setCollapsedItems] = useState({});

const getActiveRoute = path => {
return location.pathname.indexOf(path) > -1;
};

const handleToggleCollapsibleItem = label => {
setCollapsedItems(currentCollapsedItems => {
const collapsedItemsClone = { ...currentCollapsedItems };
collapsedItemsClone[label] = !collapsedItemsClone[label];
return collapsedItemsClone;
});
};

return (
<>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: isOpen,
[classes.drawerClose]: !isOpen,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: isOpen,
[classes.drawerClose]: !isOpen,
[classes.paperShadow]: true,
}),
}}
>
<div className={classes.toolbar}>
<img
className={isOpen ? classes.logo : classes.logoSmall}
draggable={false}
alt="Dojot logo"
src={localStorage.getItem('THEME') === 'dark' ? lightLogo: darkLogo}
/>
</div>

<MenuList className={classes.menuList} disablePadding>
{menuItems.map(item => {
if(!item.visible) return null;

if(item.collapsible && item.subItems) {
const isCollapsed = collapsedItems[item.name];

const hasSelectedSubItem = item.subItems.find(subItem => {
return getActiveRoute(subItem.path);
});

const handleToggleCollapsibleItems = () => {
handleToggleCollapsibleItem(item.name);
};

const handleGoToSubItems = () => {
const notSelectedSubItem = item.subItems.find(subItem => {
return !getActiveRoute(subItem.path);
});

if(notSelectedSubItem) history.push(notSelectedSubItem.path);
};

return (
<div key={item.name}>
<MenuItem
selected={!!hasSelectedSubItem}
onClick={isOpen ? handleToggleCollapsibleItems : handleGoToSubItems}
classes={{
root: isOpen ? classes.menuItem : classes.menuClosedItem,
selected: classes.selected,
}}
>
<ListItemIcon>
<item.icon
className={hasSelectedSubItem ? classes.iconSelected : classes.icon}
/>
</ListItemIcon>
<ListItemText primary={t(item.name)}/>
{isCollapsed ? <ExpandLess/> : <ExpandMore/>}
</MenuItem>

<Collapse in={isCollapsed && isOpen} timeout="auto">
{item.subItems.map(subItem => {
const isSubItemSelected = getActiveRoute(subItem.path);

return (
<Link key={subItem.name} to={subItem.path} className={classes.menuLink}>
<MenuItem
selected={isSubItemSelected}
classes={{
root: isOpen ? classes.subItem : classes.closedSubItem,
selected: classes.subItemSelected,
}}
>
<ListItemText primary={t(subItem.name)}/>
</MenuItem>
</Link>
);
})}
</Collapse>
</div>
);
}

const isSelected = getActiveRoute(item.path);

return (
<Link key={item.name} to={item.path} className={classes.menuLink}>
<MenuItem
selected={isSelected}
classes={{
root: isOpen ? classes.menuItem : classes.menuClosedItem,
selected: classes.selected,
}}
>
<ListItemIcon>
<item.icon className={isSelected ? classes.iconSelected : classes.icon}/>
</ListItemIcon>
<ListItemText primary={t(item.name)}/>
</MenuItem>
</Link>
);
const { t } = useTranslation('menu');
const history = useHistory();
const classes = useStyles();

const [collapsedItems, setCollapsedItems] = useState({});

const getActiveRoute = path => {
return location.pathname.indexOf(path) > -1;
};

const handleToggleCollapsibleItem = label => {
setCollapsedItems(currentCollapsedItems => {
const collapsedItemsClone = { ...currentCollapsedItems };
collapsedItemsClone[label] = !collapsedItemsClone[label];
return collapsedItemsClone;
});
};

return (
<>
<Drawer
variant='permanent'
className={clsx(classes.drawer, {
[classes.drawerOpen]: isOpen,
[classes.drawerClose]: !isOpen,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: isOpen,
[classes.drawerClose]: !isOpen,
[classes.paperShadow]: true,
}),
}}
>
<div className={classes.toolbar}>
<img
className={isOpen ? classes.logo : classes.logoSmall}
draggable={false}
alt='Dojot logo'
src={localStorage.getItem('THEME') === 'dark' ? lightLogo : darkLogo}
/>
</div>

<MenuList className={classes.menuList} disablePadding>
{menuItems.map(item => {
if (!item.visible) return null;

if (item.collapsible && item.subItems) {
const isCollapsed = collapsedItems[item.name];

const hasSelectedSubItem = item.subItems.find(subItem => {
return getActiveRoute(subItem.path);
});

const handleToggleCollapsibleItems = () => {
handleToggleCollapsibleItem(item.name);
};

const handleGoToSubItems = () => {
const notSelectedSubItem = item.subItems.find(subItem => {
return !getActiveRoute(subItem.path);
});

if (notSelectedSubItem) history.push(notSelectedSubItem.path);
};

return (
<div key={item.name}>
<MenuItem
selected={!!hasSelectedSubItem}
onClick={isOpen ? handleToggleCollapsibleItems : handleGoToSubItems}
classes={{
root: isOpen ? classes.menuItem : classes.menuClosedItem,
selected: classes.selected,
}}
>
<ListItemIcon>
<item.icon
className={hasSelectedSubItem ? classes.iconSelected : classes.icon}
/>
</ListItemIcon>
<ListItemText primary={t(item.name)} />
{isCollapsed ? <ExpandLess /> : <ExpandMore />}
</MenuItem>

<Collapse in={isCollapsed && isOpen} timeout='auto'>
{item.subItems.map(subItem => {
const isSubItemSelected = getActiveRoute(subItem.path);

return (
<Link key={subItem.name} to={subItem.path} className={classes.menuLink}>
<MenuItem
selected={isSubItemSelected}
classes={{
root: isOpen ? classes.subItem : classes.closedSubItem,
selected: classes.subItemSelected,
}}
>
<ListItemText primary={t(subItem.name)} />
</MenuItem>
</Link>
);
})}
</MenuList>
</Drawer>
</>
);
</Collapse>
</div>
);
}

const isSelected = getActiveRoute(item.path);

return (
<Link key={item.name} to={item.path} className={classes.menuLink}>
<MenuItem
selected={isSelected}
classes={{
root: isOpen ? classes.menuItem : classes.menuClosedItem,
selected: classes.selected,
}}
>
<ListItemIcon>
<item.icon className={isSelected ? classes.iconSelected : classes.icon} />
</ListItemIcon>
<ListItemText primary={t(item.name)} />
</MenuItem>
</Link>
);
})}
</MenuList>
</Drawer>
</>
);
};

DrawerComponent.defaultProps = {
isOpen: true,
isOpen: true,
};

DrawerComponent.propTypes = {
menuItems: PropTypes.array.isRequired,
isOpen: PropTypes.bool,
menuItems: PropTypes.array.isRequired,
isOpen: PropTypes.bool,
};

export default withRouter(DrawerComponent);
10 changes: 10 additions & 0 deletions MFE/common/src/components/Drawer/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { makeStyles } from '@material-ui/core/styles';

const drawerWidth = 215;
const appHeaderHeight = 64;

export const useStyles = makeStyles(theme => {
return {
Expand All @@ -10,16 +11,25 @@ export const useStyles = makeStyles(theme => {
whiteSpace: 'nowrap',
zIndex: theme.zIndex.drawer + 1,
overflowX: 'hidden',
height: `calc(100vh - ${appHeaderHeight}px)`,
bottom: '0px',
top: `${appHeaderHeight}px`,
},
drawerOpen: {
width: drawerWidth,
height: `calc(100vh - ${appHeaderHeight}px)`,
bottom: '0px',
top: `${appHeaderHeight}px`,
transition: theme.transitions.create(['width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
width: theme.spacing(8) + 1,
height: `calc(100vh - ${appHeaderHeight}px)`,
bottom: '0px',
top: `${appHeaderHeight}px`,
transition: theme.transitions.create(['width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
Expand Down
Loading