1 files changed, 59 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
new file mode 100644
index 000000000..f6df244a0
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
+
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+
+import Divider from '@material-ui/core/Divider';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import ListItemLink from '../components/material-ui/listItemLink';
+
+import connect, { Connect } from '../flux/connect';
+
+const drawerWidth = 240;
+
+const styles = (theme: Theme) => createStyles({
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+  },
+  toolbar: theme.mixins.toolbar
+});
+
+export const NavigationMenu = withStyles(styles)(connect()(({ classes, state }: WithStyles<typeof styles> & Connect) => {
+  return (
+    <Drawer
+      variant="permanent"
+      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>
+    </Drawer>)
+}));
+
+export default NavigationMenu;
+\ No newline at end of file