update

mpolinowski · Nov 2, 2017 · 108663b · 108663b
1 parent 493d2fb
commit 108663b
Show file tree

Hide file tree

Showing 15 changed files with 878 additions and 70 deletions.
diff --git a/src/components/ResponsiveDrawer.jsx b/src/components/ResponsiveDrawer.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from 'react'
+import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles'
 import Drawer from 'material-ui/Drawer'
 import AppBar from 'material-ui/AppBar'
 import Toolbar from 'material-ui/Toolbar'
@@ -13,16 +13,14 @@ import Typography from 'material-ui/Typography'
 import IconButton from 'material-ui/IconButton'
 import SearchIcon from 'material-ui-icons/Search'
 import Hidden from 'material-ui/Hidden'
-import Divider from 'material-ui/Divider'
 import MenuIcon from 'material-ui-icons/Menu'
 import MenuItem from 'material-ui/Menu/MenuItem'
 import ListSubheader from 'material-ui/List/ListSubheader'
 
-import { mailFolderListItems, otherMailFolderListItems } from '../data/tileData'
-import NestedList from '../data/tileDataClass'
 import Logo from '../static/instar_250x65.png'
+import DrawerMain from '../navigation/DrawerMain'
 
-const drawerWidth = 250;
+const drawerWidth = 270;
 
 const styles = theme => ({
   root: {
@@ -76,9 +74,7 @@ class ResponsiveDrawer extends React.Component {
     const drawer = (
       <div>
         <Link to="/"><img src={Logo} alt="INSTAR Deutschland GmbH" /></Link>
-        <List>{mailFolderListItems}</List>
-        <Divider />
-        <List>{otherMailFolderListItems}</List>
+        <List><DrawerMain /></List>
       </div>
     );
 

diff --git a/src/navigation/DrawerMain.jsx b/src/navigation/DrawerMain.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { withStyles } from 'material-ui/styles'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Collapse from 'material-ui/transitions/Collapse'
+import InboxIcon from 'material-ui-icons/MoveToInbox'
+import DraftsIcon from 'material-ui-icons/Drafts'
+import SendIcon from 'material-ui-icons/Send'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import Divider from 'material-ui/Divider'
+import StarBorder from 'material-ui-icons/StarBorder'
+
+import DrawerMD from './_drawerMD'
+import DrawerIA from './_drawerIA'
+import DrawerIADDNSService from './_drawerIADDNSService'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: "inherit",
+    color: "white",
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class NestedList extends React.Component {
+  state = { open: false };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+
+        <List subheader={<ListSubheader>Motion Detection</ListSubheader>}>
+          <DrawerMD />
+        </List>
+
+        <Divider />
+
+        <List subheader={<ListSubheader>Remote Access</ListSubheader>}>
+          <DrawerIA />
+        </List>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(NestedList);
diff --git a/src/navigation/_drawerIA.jsx b/src/navigation/_drawerIA.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { withStyles } from 'material-ui/styles'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Collapse from 'material-ui/transitions/Collapse'
+import InboxIcon from 'material-ui-icons/MoveToInbox'
+import DraftsIcon from 'material-ui-icons/Drafts'
+import SendIcon from 'material-ui-icons/Send'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import Divider from 'material-ui/Divider'
+import StarBorder from 'material-ui-icons/StarBorder'
+
+import DrawerIADDNSService from './_drawerIADDNSService'
+import DrawerIAPortForwarding from './_drawerIAPortForwarding'
+import DrawerIAThirdDDNS from './_drawerIAThirdDDNS'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: "inherit",
+    color: "white",
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class DrawerIA extends React.Component {
+  state = { open: false };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <ListItem button>
+          <ListItemIcon>
+            <SendIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="The P2P Service" />
+        </ListItem>
+
+        <DrawerIADDNSService />
+        <DrawerIAPortForwarding />
+
+        <ListItem button>
+          <ListItemIcon>
+            <SendIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Mobile Access" />
+        </ListItem>
+
+        <DrawerIAThirdDDNS />
+
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(DrawerIA);
diff --git a/src/navigation/_drawerIADDNSService.jsx b/src/navigation/_drawerIADDNSService.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { withStyles } from 'material-ui/styles'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Collapse from 'material-ui/transitions/Collapse'
+import InboxIcon from 'material-ui-icons/MoveToInbox'
+import DraftsIcon from 'material-ui-icons/Drafts'
+import SendIcon from 'material-ui-icons/Send'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import Divider from 'material-ui/Divider'
+import StarBorder from 'material-ui-icons/StarBorder'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: "inherit",
+    color: "white",
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class DrawerIADDNSService extends React.Component {
+  state = { open: false };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <ListItem button onClick={this.handleClick}>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="The DDNS Service" />
+          {this.state.open ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="DDNS Testing" />
+          </ListItem>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(DrawerIADDNSService);
diff --git a/src/navigation/_drawerIAPortForwarding.jsx b/src/navigation/_drawerIAPortForwarding.jsx
@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { withStyles } from 'material-ui/styles'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Collapse from 'material-ui/transitions/Collapse'
+import InboxIcon from 'material-ui-icons/MoveToInbox'
+import DraftsIcon from 'material-ui-icons/Drafts'
+import SendIcon from 'material-ui-icons/Send'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import Divider from 'material-ui/Divider'
+import StarBorder from 'material-ui-icons/StarBorder'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: "inherit",
+    color: "white",
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class DrawerIAPortForwarding extends React.Component {
+  state = { open: false };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <ListItem button onClick={this.handleClick}>
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Port Forwarding" />
+          {this.state.open ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Telekom Speedport" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="D-Link" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Netgear" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Vodafon Easybox" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Pirelli Router" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="TP-Link" />
+          </ListItem>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(DrawerIAPortForwarding);
diff --git a/src/navigation/_drawerIAThirdDDNS.jsx b/src/navigation/_drawerIAThirdDDNS.jsx
@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { withStyles } from 'material-ui/styles'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Collapse from 'material-ui/transitions/Collapse'
+import InboxIcon from 'material-ui-icons/MoveToInbox'
+import DraftsIcon from 'material-ui-icons/Drafts'
+import SendIcon from 'material-ui-icons/Send'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import Divider from 'material-ui/Divider'
+import StarBorder from 'material-ui-icons/StarBorder'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: "inherit",
+    color: "white",
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class DrawerIAThirdDDNS extends React.Component {
+  state = { open: false };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <ListItem button onClick={this.handleClick}>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Third-party DDNS" />
+          {this.state.open ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="No-IP" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Selfhost" />
+          </ListItem>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="DDNSS" />
+          </ListItem>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(DrawerIAThirdDDNS);