Update odlux

[ccsdk/features.git] / sdnr / wt / odlux / framework / src / components / navigationMenu.tsx

diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index 3da5b2f..fee5162 100644 (file)
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -1,3 +1,20 @@
+/**\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
@@ -12,7 +29,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 \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
@@ -21,41 +40,101 @@ const styles = (theme: Theme) => createStyles({
     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
       {user && user.isValid && <>\r
         <div className={classes.toolbar} />\r
-      { /* https://fiffty.github.io/react-treeview-mui/ */}\r
-      <List component="nav">\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
+          {\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
+      </> || null\r
       }\r
     </Drawer>)\r
 }));\r