diff --git a/src/components/ResponsiveDrawer.jsx b/src/components/ResponsiveDrawer.jsx
index 3cca9fb..79fea8b 100644
--- 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 = (
-
{mailFolderListItems}
-
-
{otherMailFolderListItems}
+
);
diff --git a/src/navigation/DrawerMain.jsx b/src/navigation/DrawerMain.jsx
new file mode 100644
index 0000000..1592c76
--- /dev/null
+++ 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 (
+
+
+
Motion Detection}>
+
+
+
+
+
+
Remote Access}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerIA);
diff --git a/src/navigation/_drawerIADDNSService.jsx b/src/navigation/_drawerIADDNSService.jsx
new file mode 100644
index 0000000..a35f6d6
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerIADDNSService);
diff --git a/src/navigation/_drawerIAPortForwarding.jsx b/src/navigation/_drawerIAPortForwarding.jsx
new file mode 100644
index 0000000..df0fd20
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerIAPortForwarding);
diff --git a/src/navigation/_drawerIAThirdDDNS.jsx b/src/navigation/_drawerIAThirdDDNS.jsx
new file mode 100644
index 0000000..b5efc8d
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerIAThirdDDNS);
diff --git a/src/navigation/_drawerMD.jsx b/src/navigation/_drawerMD.jsx
new file mode 100644
index 0000000..489e85b
--- /dev/null
+++ b/src/navigation/_drawerMD.jsx
@@ -0,0 +1,79 @@
+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 DrawerMDNotification from './_drawerMDNotification'
+import DrawerMDSetup from './_drawerMDSetup'
+import DrawerMDSDCard from './_drawerMDSDCard'
+import DrawerMDAlarmFTP from './_drawerMDAlarmFTP'
+import DrawerMDRouterFTP from './_drawerMDRouterFTP'
+import DrawerMDCloud from './_drawerMDCloud'
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ background: "inherit",
+ color: "white",
+ },
+ nested: {
+ paddingLeft: theme.spacing.unit * 4,
+ },
+});
+
+class DrawerMD extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMD);
diff --git a/src/navigation/_drawerMDAlarmFTP.jsx b/src/navigation/_drawerMDAlarmFTP.jsx
new file mode 100644
index 0000000..d4207f8
--- /dev/null
+++ b/src/navigation/_drawerMDAlarmFTP.jsx
@@ -0,0 +1,69 @@
+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 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 DrawerMDAlarmFTP extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMDAlarmFTP);
diff --git a/src/navigation/_drawerMDCloud.jsx b/src/navigation/_drawerMDCloud.jsx
new file mode 100644
index 0000000..6cfda0a
--- /dev/null
+++ b/src/navigation/_drawerMDCloud.jsx
@@ -0,0 +1,87 @@
+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 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 DrawerMDRouterFTP extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMDRouterFTP);
diff --git a/src/data/tileDataClass.jsx b/src/navigation/_drawerMDNotification.jsx
similarity index 78%
rename from src/data/tileDataClass.jsx
rename to src/navigation/_drawerMDNotification.jsx
index a065a3f..5a83b6f 100644
--- a/src/data/tileDataClass.jsx
+++ b/src/navigation/_drawerMDNotification.jsx
@@ -23,8 +23,8 @@ const styles = theme => ({
},
});
-class NestedList extends React.Component {
- state = { open: true };
+class DrawerMDNotification extends React.Component {
+ state = { open: false };
handleClick = () => {
this.setState({ open: !this.state.open });
@@ -33,19 +33,7 @@ class NestedList extends React.Component {
render() {
const { classes } = this.props;
return (
- Motion Detection}>
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -72,10 +60,16 @@ class NestedList extends React.Component {
+
+
+
+
+
+
-
+
);
}
}
-export default withStyles(styles)(NestedList);
+export default withStyles(styles)(DrawerMDNotification);
diff --git a/src/navigation/_drawerMDRouterFTP.jsx b/src/navigation/_drawerMDRouterFTP.jsx
new file mode 100644
index 0000000..f0064ca
--- /dev/null
+++ b/src/navigation/_drawerMDRouterFTP.jsx
@@ -0,0 +1,81 @@
+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 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 DrawerMDRouterFTP extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMDRouterFTP);
diff --git a/src/navigation/_drawerMDSDCard.jsx b/src/navigation/_drawerMDSDCard.jsx
new file mode 100644
index 0000000..2ffd4f7
--- /dev/null
+++ b/src/navigation/_drawerMDSDCard.jsx
@@ -0,0 +1,93 @@
+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 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 DrawerMDSDCard extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMDSDCard);
diff --git a/src/navigation/_drawerMDSetup.jsx b/src/navigation/_drawerMDSetup.jsx
new file mode 100644
index 0000000..5f143d1
--- /dev/null
+++ b/src/navigation/_drawerMDSetup.jsx
@@ -0,0 +1,69 @@
+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 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 DrawerMDSetup extends React.Component {
+ state = { open: false };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(DrawerMDSetup);
diff --git a/src/data/tileData.jsx b/src/navigation/tileData.jsx
similarity index 67%
rename from src/data/tileData.jsx
rename to src/navigation/tileData.jsx
index 574788f..bab35b8 100644
--- a/src/data/tileData.jsx
+++ b/src/navigation/tileData.jsx
@@ -94,46 +94,3 @@ export const otherMailFolderListItems = (
);
-
-class NestedList extends React.Component {
- state = { open: true };
-
- handleClick = () => {
- this.setState({ open: !this.state.open });
- };
-
- render() {
- const { classes } = this.props;
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {this.state.open ? : }
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/navigation/tileDataPinned.jsx b/src/navigation/tileDataPinned.jsx
new file mode 100644
index 0000000..47ea82c
--- /dev/null
+++ b/src/navigation/tileDataPinned.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ListSubheader from 'material-ui/List/ListSubheader';
+import List, { ListItem, ListItemText } from 'material-ui/List';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ background: theme.palette.background.paper,
+ position: 'relative',
+ overflow: 'auto',
+ maxHeight: 300,
+ },
+ listSection: {
+ background: 'inherit',
+ },
+});
+
+function PinnedSubheaderList(props) {
+ const { classes } = props;
+
+ return (
+
+ {[0, 1, 2, 3, 4].map(sectionId => (
+
+ {`I'm sticky ${sectionId}`}
+ {[0, 1, 2].map(item => (
+
+
+
+ ))}
+
+ ))}
+
+ );
+}
+
+PinnedSubheaderList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PinnedSubheaderList);