+/**\r
+ * ============LICENSE_START========================================================================\r
+ * ONAP : ccsdk feature sdnr wt odlux\r
+ * =================================================================================================\r
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
+ * =================================================================================================\r
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
+ * in compliance with the License. You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software distributed under the License\r
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
+ * or implied. See the License for the specific language governing permissions and limitations under\r
+ * the License.\r
+ * ============LICENSE_END==========================================================================\r
+ */\r
import * as React from 'react';\r
import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
\r
\r
import ListItemLink from '../components/material-ui/listItemLink';\r
\r
-import connect, { Connect } from '../flux/connect';\r
+import connect, { Connect, IDispatcher } from '../flux/connect';\r
+import { MenuAction } from '../actions/menuAction';\r
+import * as classNames from 'classnames';\r
\r
const drawerWidth = 240;\r
\r
position: 'relative',\r
width: drawerWidth,\r
},\r
- toolbar: theme.mixins.toolbar\r
+ toolbar: theme.mixins.toolbar as any,\r
+ drawerOpen: {\r
+ width: drawerWidth,\r
+ transition: theme.transitions.create('width', {\r
+ easing: theme.transitions.easing.sharp,\r
+ duration: theme.transitions.duration.enteringScreen,\r
+ }),\r
+ },\r
+ drawerClose: {\r
+ transition: theme.transitions.create('width', {\r
+ easing: theme.transitions.easing.sharp,\r
+ duration: theme.transitions.duration.leavingScreen,\r
+ }),\r
+ overflowX: 'hidden',\r
+ width: theme.spacing(7) + 1,\r
+ [theme.breakpoints.up('sm')]: {\r
+ width: theme.spacing(9) + 1,\r
+ },\r
+ }\r
});\r
\r
-export const NavigationMenu = withStyles(styles)(connect()(({ classes, state }: WithStyles<typeof styles> & Connect) => {\r
+const tabletWidthBreakpoint = 768;\r
+\r
+export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {\r
+ const { user } = state.framework.authenticationState\r
+ const isOpen = state.framework.applicationState.isMenuOpen\r
+ const closedByUser = state.framework.applicationState.isMenuClosedByUser\r
+\r
+ const [responsive, setResponsive] = React.useState(false);\r
+\r
+ React.useEffect(() => {\r
+\r
+ function handleResize() {\r
+ if (user && user.isValid) {\r
+ if (window.innerWidth < tabletWidthBreakpoint && !responsive) {\r
+ setResponsive(true);\r
+ if (!closedByUser) {\r
+ console.log("responsive menu collapsed")\r
+ dispatch(new MenuAction(false));\r
+ }\r
+\r
+ } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {\r
+ setResponsive(false);\r
+ if (!closedByUser) {\r
+ console.log("responsive menu restored")\r
+ dispatch(new MenuAction(true));\r
+ }\r
+\r
+ }\r
+ }\r
+ }\r
+ window.addEventListener("resize", handleResize);\r
+\r
+\r
+ return () => {\r
+ window.removeEventListener("resize", handleResize);\r
+ }\r
+ })\r
+\r
return (\r
<Drawer\r
variant="permanent"\r
+ className={\r
+ classNames({\r
+ [classes.drawerOpen]: isOpen,\r
+ [classes.drawerClose]: !isOpen\r
+ })\r
+ }\r
classes={{\r
paper: classes.drawerPaper,\r
}}\r
>\r
- <div className={classes.toolbar} />\r
- { /* https://fiffty.github.io/react-treeview-mui/ */}\r
- <List component="nav">\r
- { process.env.NODE_ENV === "development" ? <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} /> : null } \r
- <Divider />\r
- {\r
- state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
- const reg = state.framework.applicationRegistraion[key];\r
- return reg && (\r
- <ListItemLink\r
- key={reg.name}\r
- to={reg.path || `/${reg.name}`}\r
- primary={reg.menuEntry || reg.name}\r
- secondary={reg.subMenuEntry}\r
- icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
- ) || null;\r
- }) || null\r
- }\r
- <Divider />\r
- { process.env.NODE_ENV === "development" ? <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} /> : null } \r
- </List>\r
+ {user && user.isValid && <>\r
+ <div className={classes.toolbar} />\r
+ { /* https://fiffty.github.io/react-treeview-mui/ */}\r
+ <List component="nav">\r
+ <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />\r
+ <Divider />\r
+ {\r
+ state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
+ const reg = state.framework.applicationRegistraion[key];\r
+ return reg && (\r
+ <ListItemLink\r
+ key={reg.name}\r
+ to={reg.path || `/${reg.name}`}\r
+ primary={reg.menuEntry || reg.name}\r
+ secondary={reg.subMenuEntry}\r
+ icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
+ ) || null;\r
+ }) || null\r
+ }\r
+ <Divider />\r
+ <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />\r
+ </List>\r
+ </> || null\r
+ }\r
</Drawer>)\r
}));\r
\r