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

   1 import * as React from 'react';\r
   2 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
   3 \r
   4 import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';\r
   5 \r
   6 import Drawer from '@material-ui/core/Drawer';\r
   7 import List from '@material-ui/core/List';\r
   8 \r
   9 import Divider from '@material-ui/core/Divider';\r
  10 \r
  11 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r
  12 \r
  13 import ListItemLink from '../components/material-ui/listItemLink';\r
  14 \r
  15 import connect, { Connect } from '../flux/connect';\r
  16 \r
  17 const drawerWidth = 240;\r
  18 \r
  19 const styles = (theme: Theme) => createStyles({\r
  20   drawerPaper: {\r
  21     position: 'relative',\r
  22     width: drawerWidth,\r
  23   },\r
  24   toolbar: theme.mixins.toolbar\r
  25 });\r
  26 \r
  27 export const NavigationMenu = withStyles(styles)(connect()(({ classes, state }: WithStyles<typeof styles> & Connect) => {\r
  28   const { user } = state.framework.authenticationState\r
  29   return (\r
  30     <Drawer\r
  31       variant="permanent"\r
  32       classes={{\r
  33         paper: classes.drawerPaper,\r
  34       }}\r
  35     >\r
  36       {user && user.isValid && <>\r
  37         <div className={classes.toolbar} />\r
  38       { /* https://fiffty.github.io/react-treeview-mui/ */}\r
  39       <List component="nav">\r
  40           <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />\r
  41           <Divider />\r
  42         {\r
  43           state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
  44             const reg = state.framework.applicationRegistraion[key];\r
  45             return reg && (\r
  46               <ListItemLink\r
  47                 key={reg.name}\r
  48                 to={reg.path || `/${reg.name}`}\r
  49                 primary={reg.menuEntry || reg.name}\r
  50                 secondary={reg.subMenuEntry}\r
  51                 icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
  52             ) || null;\r
  53           }) || null\r
  54         }\r
  55         <Divider />\r
  56         <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />\r
  57         </List>\r
  58         </> || null\r
  59       }\r
  60     </Drawer>)\r
  61 }));\r
  62 \r
  63 export default NavigationMenu;