sdnr/wt/odlux/framework/src/components/navigationMenu.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';\r
  19 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
  20 \r
  21 import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';\r
  22 \r
  23 import Drawer from '@material-ui/core/Drawer';\r
  24 import List from '@material-ui/core/List';\r
  25 \r
  26 import Divider from '@material-ui/core/Divider';\r
  27 \r
  28 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r
  29 \r
  30 import ListItemLink from '../components/material-ui/listItemLink';\r
  31 \r
  32 import connect, { Connect } from '../flux/connect';\r
  33 \r
  34 const drawerWidth = 240;\r
  35 \r
  36 const styles = (theme: Theme) => createStyles({\r
  37   drawerPaper: {\r
  38     position: 'relative',\r
  39     width: drawerWidth,\r
  40   },\r
  41   toolbar: theme.mixins.toolbar\r
  42 });\r
  43 \r
  44 export const NavigationMenu = withStyles(styles)(connect()(({ classes, state }: WithStyles<typeof styles> & Connect) => {\r
  45   const { user } = state.framework.authenticationState\r
  46   return (\r
  47     <Drawer\r
  48       variant="permanent"\r
  49       classes={{\r
  50         paper: classes.drawerPaper,\r
  51       }}\r
  52     >\r
  53       {user && user.isValid && <>\r
  54         <div className={classes.toolbar} />\r
  55       { /* https://fiffty.github.io/react-treeview-mui/ */}\r
  56       <List component="nav">\r
  57           <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />\r
  58           <Divider />\r
  59         {\r
  60           state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
  61             const reg = state.framework.applicationRegistraion[key];\r
  62             return reg && (\r
  63               <ListItemLink\r
  64                 key={reg.name}\r
  65                 to={reg.path || `/${reg.name}`}\r
  66                 primary={reg.menuEntry || reg.name}\r
  67                 secondary={reg.subMenuEntry}\r
  68                 icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
  69             ) || null;\r
  70           }) || null\r
  71         }\r
  72         <Divider />\r
  73         <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />\r
  74         </List>\r
  75         </> || null\r
  76       }\r
  77     </Drawer>)\r
  78 }));\r
  79 \r
  80 export default NavigationMenu;