summaryrefslogtreecommitdiffstats
path: root/front/odiparpack/app/components/Sidebar
diff options
context:
space:
mode:
authorDayana31 <[email protected]>2022-06-01 16:43:23 -0500
committerDayana31 <[email protected]>2022-06-01 16:43:23 -0500
commitec0c33156713e51c64f2a9de4f932cd5507c654b (patch)
treecc46421686a49bbc0a0c343e460c13a21af1015d /front/odiparpack/app/components/Sidebar
parent6971201caffc2fccee5bfb12e88e5510c85eeb49 (diff)
parente9cb09907f8dbc9a4a64549a3ea4d1d8313e7c25 (diff)
downloadDP1_project-ec0c33156713e51c64f2a9de4f932cd5507c654b.tar.gz
DP1_project-ec0c33156713e51c64f2a9de4f932cd5507c654b.tar.bz2
DP1_project-ec0c33156713e51c64f2a9de4f932cd5507c654b.zip
Merge branch 'develop' into dayana
Diffstat (limited to 'front/odiparpack/app/components/Sidebar')
-rw-r--r--front/odiparpack/app/components/Sidebar/MainMenuSimple.js96
-rw-r--r--front/odiparpack/app/components/Sidebar/Sidebar.js14
-rw-r--r--front/odiparpack/app/components/Sidebar/sidebar-jss.js18
3 files changed, 115 insertions, 13 deletions
diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js
new file mode 100644
index 0000000..18ac8fd
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+// Menu Object
+import MenuContent from 'odi-utils/menu';
+import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core';
+import styles from './sidebar-jss';
+
+function sortByKey(array, key) {
+ return array.sort((a, b) => {
+ const x = a[key]; const y = b[key];
+ return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+ });
+}
+
+const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
+ return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
+});
+
+function MainMenuSimple(props) {
+ const {
+ classes,
+ toggleDrawerOpen,
+ loadTransition,
+ openSubMenu,
+ open,
+ } = props;
+
+ const handleClick = () => {
+ //toggleDrawerOpen();
+ loadTransition(false);
+ };
+
+ const getMenus = menuArray => menuArray.map((item, index) => {
+ return (
+ <div key={index.toString()}>
+ <ListItem
+ button
+ exact
+ className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
+ activeClassName={classes.active}
+ component={LinkBtn}
+ to={item.link}
+ onClick={handleClick}
+ timeout="auto"
+ unmountOnExit
+ >
+ {item.icon
+ && (
+ <ListItemIcon className={classes.iconWrapper}>
+ <Icon className={classes.icon}>{item.icon}</Icon>
+ </ListItemIcon>
+ )
+ }
+ <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
+ </ListItem>
+ </div>
+ );
+ });
+ return (
+ <div>
+ {getMenus(MenuContent)}
+ </div>
+ );
+}
+
+MainMenuSimple.propTypes = {
+ classes: PropTypes.object.isRequired,
+ open: PropTypes.object.isRequired,
+ openSubMenu: PropTypes.func.isRequired,
+ toggleDrawerOpen: PropTypes.func.isRequired,
+ loadTransition: PropTypes.func.isRequired,
+};
+
+const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
+const reducer = 'ui';
+
+const mapStateToProps = state => ({
+ force: state, // force active class for sidebar menu
+ open: state.getIn([reducer, 'subMenuOpen'])
+});
+
+const mapDispatchToProps = dispatch => ({
+ openSubMenu: bindActionCreators(openAction, dispatch)
+});
+
+const MainMenuMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(MainMenuSimple);
+
+export default withStyles(styles)(MainMenuMapped);
diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js
index 01de4ec..b4f5626 100644
--- a/front/odiparpack/app/components/Sidebar/Sidebar.js
+++ b/front/odiparpack/app/components/Sidebar/Sidebar.js
@@ -4,10 +4,10 @@ import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import brand from 'ba-api/brand';
import dummy from 'ba-api/dummyContents';
-import logo from 'ba-images/logo.svg';
-import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core';
-import MainMenu from './MainMenu';
-import OtherMenu from './OtherMenu';
+import logo from 'ba-images/logo.png';
+import { Hidden, Drawer, SwipeableDrawer, Avatar } from '@material-ui/core';
+import MainMenuSimple from './MainMenuSimple';
+//import OtherMenu from './OtherMenu';
import styles from './sidebar-jss';
const MenuContent = props => {
@@ -38,11 +38,11 @@ const MenuContent = props => {
</div>
</div>
<div className={classes.menuContainer}>
- <MainMenu loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
- <Divider className={classes.divider} />
+ <MainMenuSimple loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
+ {/* <Divider className={classes.divider} />
<List>
<OtherMenu toggleDrawerOpen={toggleDrawerOpen} />
- </List>
+ </List> */}
</div>
</div>
);
diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
index e9bf4f6..95fb2b2 100644
--- a/front/odiparpack/app/components/Sidebar/sidebar-jss.js
+++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
@@ -76,11 +76,14 @@ const styles = theme => ({
}
},
avatar: {
- margin: 10,
+ marginBottom: 10,
+ marginTop: 10,
+ marginLeft: 6,
+ marginRight: 10
},
bigAvatar: {
- width: 80,
- height: 80,
+ width: 55,
+ height: 55,
},
brandBar: {
transition: theme.transitions.create(['width', 'margin', 'background'], {
@@ -168,16 +171,19 @@ const styles = theme => ({
fontSize: 14,
padding: 10,
alignItems: 'center',
+ justifyContent: 'flex-start',
'& h4': {
- fontSize: 18,
+ fontSize: 19,
marginBottom: 0,
textOverflow: 'ellipsis',
+ display: 'flex',
overflow: 'hidden',
whiteSpace: 'nowrap',
- width: 110
+ wordBreak:'break-all',
+ width: 180,
},
'& span': {
- fontSize: 12,
+ fontSize: 14,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: 110,