X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=sdnr%2Fwt%2Fodlux%2Fframework%2Fsrc%2Fcomponents%2FnavigationMenu.tsx;h=fee51621e8607eb538c1fb1d70f4a560fd3e6a66;hb=d0fc4329aa47fa3fdcc3a9f3af31e977ad21b979;hp=f6df244a0b8429cddde74f18d5878e5800ebc73d;hpb=3d202a04b99f0e61b6ccf8b7a5610e1a15ca58e7;p=ccsdk%2Ffeatures.git

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