Home Explore Help
Sign In
logicp
/
jre
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

adding a drawer

logicp 5 years ago
parent
04b29a6d39
commit
3d92effacb
8 changed files with 942 additions and 9 deletions
Split View Show Diff Stats
  1. 3 0
      package.json
  2. 6 1
      src/App.css
  3. 22 7
      src/App.js
  4. 226 0
      src/AppBar.js
  5. 299 0
      src/Drawer.js
  6. 89 0
      src/Menu.js
  7. 22 0
      src/Navigation.js
  8. 275 1
      yarn.lock

+ 3 - 0
package.json
View File 

@@ -3,9 +3,12 @@
 
   "version": "0.1.0",
 
   "private": true,
 
   "dependencies": {
 
+    "@material-ui/core": "^4.5.0",
 
+    "@material-ui/icons": "^4.4.3",
 
     "express": "^4.17.1",
 
     "react": "^16.10.2",
 
     "react-dom": "^16.10.2",
 
+    "react-google-font-loader": "^1.1.0",
 
     "react-scripts": "3.2.0"
 
   },
 
   "scripts": {

+ 6 - 1
src/App.css
View File 

@@ -18,10 +18,15 @@
 
   color: white;
 
 }
 
 
-.App-link, .band-text {
 
+.App-link,
 
+.band-text {
 
   color: #09d3ac;
 
 }
 
 
+.toolbar {
 
+  background-color: #09d3ac;
 
+}
 
+
 
 #main-container {
 
   padding: 8px;
 
 }

+ 22 - 7
src/App.js
View File 

@@ -1,11 +1,22 @@
 
-import React from 'react';
 
-import logo from './assets/JRElogo.png';
 
-import jean from './assets/jean_poise.jpg'
 
-import './App.css';
 
+import React from "react";
 
+import Navigation from "./Navigation";
 
+import logo from "./assets/JRElogo.png";
 
+import GoogleFontLoader from "react-google-font-loader";
 
+import jean from "./assets/jean_poise.jpg";
 
+import "./App.css";
 
 
 function App() {
 
   return (
 
     <div className="App">
 
+      <GoogleFontLoader
 
+        fonts={[
 
+          {
 
+            font: "Roboto",
 
+            weights: [300, 400, 500, 700]
 
+          }
 
+        ]}
 
+      />
 
+      <Navigation />
 
       <header className="App-header">
 
         <img src={logo} className="App-logo" alt="logo" />
 
         <a
 
@@ -19,9 +30,7 @@ function App() {
 
         <body>
 
           <div id="main-container">
 
             <img src={jean} className="band-member-pic" alt="Jean Bergeron" />
 
-            <h4 className="band-text">
 
-              Jean in top form
 
-            </h4>
 
+            <h4 className="band-text">Jean in top form</h4>
 
           </div>
 
         </body>
 
       </header>
 
@@ -30,3 +39,9 @@ function App() {
 
 }
 
 
 export default App;
 
+
 
+class JREMenu extends React.Component {
 
+  constructor(props) {
 
+    super(props);
 
+  }
 
+}

+ 226 - 0
src/AppBar.js
View File 

@@ -0,0 +1,226 @@
 
+import React from "react";
 
+import AppBar from "@material-ui/core/AppBar";
 
+import Toolbar from "@material-ui/core/Toolbar";
 
+
 
+import Link from "@material-ui/core/Link";
 
+import IconButton from "@material-ui/core/IconButton";
 
+
 
+import ListItem from "@material-ui/core/ListItem";
 
+import ListItemIcon from "@material-ui/core/ListItemIcon";
 
+import ListItemText from "@material-ui/core/ListItemText";
 
+
 
+import MenuIcon from "@material-ui/icons/Menu";
 
+import Notifications from "@material-ui/icons/Notifications";
 
+import NotificationsActive from "@material-ui/icons/NotificationsActive";
 
+import BasicIcon from "@material-ui/core/Icon";
 
+
 
+import Tooltip from "@material-ui/core/Tooltip";
 
+
 
+const classes = {
 
+  menuButton: "menu-button",
 
+  menuIcon: "menu-icon",
 
+  logoIcon: "trx-logo-icon",
 
+  logoButton: "trx-logo-button"
 
+};
 
+
 
+const styles = {
 
+  userMenu: {
 
+    marginLeft: "auto",
 
+    display: "flex"
 
+  },
 
+  bell: {
 
+    marginLeft: "auto",
 
+    backgroundColor: "#00ccf5",
 
+    flex: 1,
 
+    marginTop: "10%",
 
+    marginLeft: "24px"
 
+  },
 
+  userInfo: {
 
+    flex: 1,
 
+    minWidth: "80px",
 
+    maxHeight: "64px!important",
 
+    marginRight: "17px"
 
+  }
 
+};
 
+
 
+const TRXLogo = () => {
 
+  return (
 
+    <div>
 
+      <img id="trx-logo-img" height="64px" src="/static/images/logo.png" />
 
+    </div>
 
+  );
 
+};
 
+
 
+const BellIcon = () => {
 
+  return <NotificationsActive className="bell" />;
 
+};
 
+
 
+const EmptyBellIcon = () => {
 
+  return <Notifications className="bell" />;
 
+};
 
+
 
+const menuItems = [
 
+  {
 
+    url: "/",
 
+    label: "Trade",
 
+    icon: "tradeicon"
 
+  },
 
+  {
 
+    url: "/user",
 
+    label: "Account settings",
 
+    icon: "person"
 
+  },
 
+  {
 
+    url: "/user/all",
 
+    label: "Users: All",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/login",
 
+    label: "Login",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/register",
 
+    label: "Register",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/heartbeat/feed",
 
+    label: "Social Feed",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/transaction/tx-gui",
 
+    label: "Transaction GUI",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/regtest/all-users",
 
+    label: "Transaction GUI - All users",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/admin/bot",
 
+    label: "Bot Interface",
 
+    icon: ""
 
+  },
 
+  {
 
+    url: "/prices/graph",
 
+    label: "BTC Price Graph",
 
+    icon: "trending_up"
 
+  }
 
+];
 
+
 
+const userMenuItems = [
 
+  { label: "Account settings", url: "/user" },
 
+  { label: "Logout", url: "/logout" }
 
+];
 
+/**
 
+ *
 
+ * @param {Array} menuItems An Array of menu item objects
 
+ * @param {String} menuItems.url The URL for the menu item
 
+ * @param {String} menuItems.label The Label for the menu item
 
+ * @param {String} menuItems.icon The Icon for the menu item
 
+ *
 
+ */
 
+const buildSideMenuItems = menuItems => {
 
+  const children = [];
 
+  for (let i = 0; i < menuItems.length; i++) {
 
+    const item = menuItems[i];
 
+    children.push(
 
+      <ListItem button key={i}>
 
+        <ListItemIcon>{item.icon}</ListItemIcon>
 
+        <ListItemText primary={item.label} />
 
+        <Link href={item.url} />
 
+      </ListItem>
 
+    );
 
+  }
 
+};
 
+
 
+export default class TrxNav extends React.Component {
 
+  constructor(props) {
 
+    super(props);
 
+    this.state = {
 
+      open: false,
 
+      userMenuOpen: false,
 
+      notification: false,
 
+      notificationMenuOpen: false,
 
+      messages: [],
 
+      userData: props.user || {},
 
+      notificationAnchor: undefined
 
+    };
 
+  }
 
+
 
+  componentWillReceiveProps(props) {
 
+    if (props.drawerHandler) {
 
+      this.drawerHandler = props.drawerHandler;
 
+    }
 
+    if (props.messages) {
 
+      this.setState({ messages: { ...this.state.messages, ...props.message } });
 
+    }
 
+    if (props.user) {
 
+      this.setState({ userData: props.user });
 
+    }
 
+    if (props.notificationMessage) {
 
+      this.setState({
 
+        messages: [...this.state.messages, props.notificationMessage],
 
+        notification: true
 
+      });
 
+    }
 
+  }
 
+
 
+  handleUserMenuClick = () => {
 
+    this.setState({ userMenuOpen: !this.state.userMenuOpen });
 
+  };
 
+
 
+  handleUserMenuClose = () => {
 
+    this.setState({ userMenuOpen: false });
 
+  };
 
+
 
+  handleNotificationMenuClick = e => {
 
+    this.setState({
 
+      notificationAnchor: e.currentTarget,
 
+      notificationMenuOpen: !this.state.notificationMenuOpen
 
+    });
 
+  };
 
+
 
+  handleNotificationMenuClose = () => {
 
+    this.setState({ notificationMenuOpen: false });
 
+  };
 
+
 
+  handleAllNotificationsRead = () => {
 
+    this.setState({ notification: false });
 
+  };
 
+
 
+  render() {
 
+    return (
 
+      <div>
 
+        <AppBar position="sticky" className="appbar" position="static">
 
+          <Toolbar
 
+            disableGutters={!this.state.open}
 
+            className="toolbar"
 
+            title="JRE"
 
+          >
 
+            <Tooltip title="Click to open the navigation drawer">
 
+              <IconButton
 
+                className={classes.menuBotton}
 
+                onClick={this.props.drawerHandler}
 
+              >
 
+                <MenuIcon className={classes.menuIcon} />
 
+              </IconButton>
 
+            </Tooltip>
 
+          </Toolbar>
 
+        </AppBar>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+const logoIcon = () => {
 
+  return (
 
+    <BasicIcon className={classes.logoIcon} hidden={false}>
 
+      <TRXLogo />
 
+    </BasicIcon>
 
+  );
 
+};

+ 299 - 0
src/Drawer.js
View File 

@@ -0,0 +1,299 @@
 
+import React from "react";
 
+import { withStyles } from "@material-ui/core/styles";
 
+import Drawer from "@material-ui/core/Drawer";
 
+import List from "@material-ui/core/List";
 
+import Divider from "@material-ui/core/Divider";
 
+import ListItem from "@material-ui/core/ListItem";
 
+import ListItemIcon from "@material-ui/core/ListItemIcon";
 
+import ListItemText from "@material-ui/core/ListItemText";
 
+import InboxIcon from "@material-ui/icons/MoveToInbox";
 
+import MailIcon from "@material-ui/icons/Mail";
 
+import MusicNoteIcon from "@material-ui/icons/MusicNote";
 
+import SvgIcon from "@material-ui/core/SvgIcon";
 
+import TradeIcon from "@material-ui/icons/StoreTwoTone";
 
+
 
+export const LoginIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M10,17.25V14H3V10H10V6.75L15.25,12L10,17.25M8,2H17A2,2 0 0,1 19,4V20A2,2 0 0,1 17,22H8A2,2 0 0,1 6,20V16H8V20H17V4H8V8H6V4A2,2 0 0,1 8,2Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const RegisterIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const TimelineIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M5,2V8H3V2H5M3,22H5V16H3V22M6,12A2,2 0 0,0 4,10A2,2 0 0,0 2,12A2,2 0 0,0 4,14A2,2 0 0,0 6,12M22,7V17A2,2 0 0,1 20,19H11A2,2 0 0,1 9,17V14L7,12L9,10V7A2,2 0 0,1 11,5H20A2,2 0 0,1 22,7Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const TimelineIcon2 = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M15,14V11H18V9L22,12.5L18,16V14H15M14,7.7V9H2V7.7L8,4L14,7.7M7,10H9V15H7V10M3,10H5V15H3V10M13,10V12.5L11,14.3V10H13M9.1,16L8.5,16.5L10.2,18H2V16H9.1M17,15V18H14V20L10,16.5L14,13V15H17Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const BotIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const TransactionIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const TrendsIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+export const UserListIcon = () => {
 
+  return (
 
+    <SvgIcon>
 
+      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
 
+        <path
 
+          fill="#000000"
 
+          d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"
 
+        />
 
+      </svg>
 
+    </SvgIcon>
 
+  );
 
+};
 
+
 
+const styles = {
 
+  list: {
 
+    width: 250
 
+  },
 
+  fullList: {
 
+    width: "auto"
 
+  }
 
+};
 
+
 
+const menuItems =
 
+  // trx_env === 'LOCAL_DEVELOPMENT' ?
 
+  [
 
+    {
 
+      url: "/",
 
+      label: "Gallery",
 
+      icon: <TradeIcon />
 
+    },
 
+    {
 
+      url: "/",
 
+      label: "Listen",
 
+      icon: <MusicNoteIcon />
 
+    }
 
+  ];
 
+
 
+const buildSideMenuItems = menuItems => {
 
+  const children = [];
 
+  for (let i = 0; i < menuItems.length; i++) {
 
+    const item = menuItems[i];
 
+    children.push(
 
+      <ListItem button key={i}>
 
+        <a href={item.url}>
 
+          <ListItemIcon>{item.icon}</ListItemIcon>
 
+          <ListItemText primary={item.label} />
 
+        </a>
 
+      </ListItem>
 
+    );
 
+  }
 
+  return children;
 
+};
 
+
 
+class TemporaryDrawer extends React.Component {
 
+  state = {
 
+    top: false,
 
+    left: false,
 
+    bottom: false,
 
+    right: false
 
+  };
 
+
 
+  toggleDrawer = (side, open) => () => {
 
+    this.setState({
 
+      [side]: open
 
+    });
 
+    if (this.props.drawerHandler) {
 
+      this.props.drawerHandler();
 
+    }
 
+  };
 
+
 
+  componentWillReceiveProps(props) {
 
+    this.setState({
 
+      left: props.open
 
+    });
 
+  }
 
+
 
+  render() {
 
+    const { classes } = this.props;
 
+
 
+    const sideList = (
 
+      <div className="sidelist">
 
+        <List>
 
+          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
 
+            <ListItem button key={text}>
 
+              <ListItemIcon>
 
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
 
+              </ListItemIcon>
 
+              <ListItemText primary={text} />
 
+            </ListItem>
 
+          ))}
 
+        </List>
 
+        <Divider />
 
+        <List>
 
+          {["All mail", "Trash", "Spam"].map((text, index) => (
 
+            <ListItem button key={text}>
 
+              <ListItemIcon>
 
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
 
+              </ListItemIcon>
 
+              <ListItemText primary={text} />
 
+            </ListItem>
 
+          ))}
 
+        </List>
 
+      </div>
 
+    );
 
+
 
+    const fullList = (
 
+      <div className="fulllist">
 
+        <List>
 
+          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
 
+            <ListItem button key={text}>
 
+              <ListItemIcon>
 
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
 
+              </ListItemIcon>
 
+              <ListItemText primary={text} />
 
+            </ListItem>
 
+          ))}
 
+        </List>
 
+        <Divider />
 
+        <List>
 
+          {["All mail", "Trash", "Spam"].map((text, index) => (
 
+            <ListItem button key={text}>
 
+              <ListItemIcon>
 
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
 
+              </ListItemIcon>
 
+              <ListItemText primary={text} />
 
+            </ListItem>
 
+          ))}
 
+        </List>
 
+      </div>
 
+    );
 
+
 
+    return (
 
+      <div>
 
+        <Drawer
 
+          open={this.state.left}
 
+          onClose={this.toggleDrawer("left", false)}
 
+        >
 
+          <div
 
+            tabIndex={0}
 
+            role="button"
 
+            onClick={this.toggleDrawer("left", false)}
 
+            onKeyDown={this.toggleDrawer("left", false)}
 
+          >
 
+            {buildSideMenuItems(menuItems)}
 
+          </div>
 
+        </Drawer>
 
+        <Drawer
 
+          anchor="top"
 
+          open={this.state.top}
 
+          onClose={this.toggleDrawer("top", false)}
 
+        >
 
+          <div
 
+            tabIndex={0}
 
+            role="button"
 
+            onClick={this.toggleDrawer("top", false)}
 
+            onKeyDown={this.toggleDrawer("top", false)}
 
+          >
 
+            {fullList}
 
+          </div>
 
+        </Drawer>
 
+        <Drawer
 
+          anchor="bottom"
 
+          open={this.state.bottom}
 
+          onClose={this.toggleDrawer("bottom", false)}
 
+        >
 
+          <div
 
+            tabIndex={0}
 
+            role="button"
 
+            onClick={this.toggleDrawer("bottom", false)}
 
+            onKeyDown={this.toggleDrawer("bottom", false)}
 
+          >
 
+            {fullList}
 
+          </div>
 
+        </Drawer>
 
+        <Drawer
 
+          anchor="right"
 
+          open={this.state.right}
 
+          onClose={this.toggleDrawer("right", false)}
 
+        >
 
+          <div
 
+            tabIndex={0}
 
+            role="button"
 
+            onClick={this.toggleDrawer("right", false)}
 
+            onKeyDown={this.toggleDrawer("right", false)}
 
+          >
 
+            {buildSideMenuItems(menuItems)}
 
+          </div>
 
+        </Drawer>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+export default withStyles(styles)(TemporaryDrawer);

+ 89 - 0
src/Menu.js
View File 

@@ -0,0 +1,89 @@
 
+import React from "react";
 
+import { makeStyles } from "@material-ui/core/styles";
 
+import AppBar from "@material-ui/core/AppBar";
 
+import Toolbar from "@material-ui/core/Toolbar";
 
+import Typography from "@material-ui/core/Typography";
 
+import IconButton from "@material-ui/core/IconButton";
 
+import MenuIcon from "@material-ui/icons/Menu";
 
+import AccountCircle from "@material-ui/icons/AccountCircle";
 
+import Switch from "@material-ui/core/Switch";
 
+import FormControlLabel from "@material-ui/core/FormControlLabel";
 
+import FormGroup from "@material-ui/core/FormGroup";
 
+import MenuItem from "@material-ui/core/MenuItem";
 
+import Menu from "@material-ui/core/Menu";
 
+
 
+const useStyles = makeStyles(theme => ({
 
+  root: {
 
+    flexGrow: 1
 
+  },
 
+  menuButton: {
 
+    marginRight: theme.spacing(2)
 
+  },
 
+  title: {
 
+    flexGrow: 1
 
+  }
 
+}));
 
+
 
+export default function MenuAppBar() {
 
+  const classes = useStyles();
 
+  const [auth, setAuth] = React.useState(true);
 
+  const [anchorEl, setAnchorEl] = React.useState(null);
 
+  const open = Boolean(anchorEl);
 
+
 
+  const handleMenu = event => {
 
+    setAnchorEl(event.currentTarget);
 
+  };
 
+
 
+  const handleClose = () => {
 
+    setAnchorEl(null);
 
+  };
 
+
 
+  return (
 
+    <div className={classes.root}>
 
+      <AppBar position="static">
 
+        <Toolbar>
 
+          <IconButton
 
+            edge="start"
 
+            className={classes.menuButton}
 
+            color="inherit"
 
+            aria-label="menu"
 
+          >
 
+            <MenuIcon />
 
+          </IconButton>
 
+          <Typography variant="h6" className={classes.title}>
 
+            Welcome
 
+          </Typography>
 
+          {/* <div>
 
+              <IconButton
 
+                aria-label="account of current user"
 
+                aria-controls="menu-appbar"
 
+                aria-haspopup="true"
 
+                onClick={handleMenu}
 
+                color="inherit"
 
+              >
 
+                <AccountCircle />
 
+              </IconButton>
 
+              <Menu
 
+                id="menu-appbar"
 
+                anchorEl={anchorEl}
 
+                anchorOrigin={{
 
+                  vertical: "top",
 
+                  horizontal: "right"
 
+                }}
 
+                keepMounted
 
+                transformOrigin={{
 
+                  vertical: "top",
 
+                  horizontal: "right"
 
+                }}
 
+                open={open}
 
+                onClose={handleClose}
 
+              >
 
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
 
+                <MenuItem onClick={handleClose}>My account</MenuItem>
 
+              </Menu>
 
+            </div> */}
 
+        </Toolbar>
 
+      </AppBar>
 
+    </div>
 
+  );
 
+}

+ 22 - 0
src/Navigation.js
View File 

@@ -0,0 +1,22 @@
 
+import React, { Component } from "react";
 
+import AppBar from "./AppBar";
 
+import Drawer from "./Drawer";
 
+
 
+export default class TrxNavigation extends Component {
 
+  state = {
 
+    open: false
 
+  };
 
+
 
+  drawerHandler = () => {
 
+    this.setState({ open: !this.state.open });
 
+  };
 
+
 
+  render() {
 
+    return (
 
+      <div>
 
+        <AppBar drawerHandler={this.drawerHandler} />
 
+        <Drawer drawerHandler={this.drawerHandler} open={this.state.open} />
 
+      </div>
 
+    );
 
+  }
 
+}

+ 275 - 1
yarn.lock
View File 

@@ -853,6 +853,13 @@
 
   dependencies:
 
     regenerator-runtime "^0.13.2"
 
 
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2":
 
+  version "7.6.3"
 
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
 
+  integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
 
+  dependencies:
 
+    regenerator-runtime "^0.13.2"
 
+
 
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
 
   version "7.6.0"
 
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
 
@@ -904,6 +911,11 @@
 
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
 
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
 
+"@emotion/hash@^0.7.1":
 
+  version "0.7.3"
 
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
 
+  integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
 
+
 
 "@hapi/address@2.x.x":
 
   version "2.1.2"
 
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
 
@@ -1084,6 +1096,82 @@
 
     "@types/istanbul-reports" "^1.1.1"
 
     "@types/yargs" "^13.0.0"
 
 
+"@material-ui/core@^4.5.0":
 
+  version "4.5.0"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.5.0.tgz#7e57cc40988c71b6340e3b2569b47dbac1820351"
 
+  integrity sha512-UHVAjU+1uDtA+OMBNBHb4RlCZOu514XeYPafNJv+GTdXBDr1SCPK7yqRE6TV1/bulxlDusTgu5Q6BAUgpmO4MA==
 
+  dependencies:
 
+    "@babel/runtime" "^7.4.4"
 
+    "@material-ui/styles" "^4.5.0"
 
+    "@material-ui/system" "^4.5.0"
 
+    "@material-ui/types" "^4.1.1"
 
+    "@material-ui/utils" "^4.4.0"
 
+    "@types/react-transition-group" "^4.2.0"
 
+    clsx "^1.0.2"
 
+    convert-css-length "^2.0.1"
 
+    deepmerge "^4.0.0"
 
+    hoist-non-react-statics "^3.2.1"
 
+    is-plain-object "^3.0.0"
 
+    normalize-scroll-left "^0.2.0"
 
+    popper.js "^1.14.1"
 
+    prop-types "^15.7.2"
 
+    react-transition-group "^4.3.0"
 
+
 
+"@material-ui/icons@^4.4.3":
 
+  version "4.4.3"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.4.3.tgz#5d4346ddbb2673a1b57ebc78fd6d50bcd88711db"
 
+  integrity sha512-HVVvUyc/78kmaBd93LkfWyGkXMM+zOMKzUfulWXxaV/fFAZ3N0pD0oHjWUd94zrOoF3tZP9JC7EPlIpIcZSNow==
 
+  dependencies:
 
+    "@babel/runtime" "^7.4.4"
 
+
 
+"@material-ui/styles@^4.5.0":
 
+  version "4.5.0"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.5.0.tgz#4e591b8d44c7ecce318634bd8ac652499b6c277a"
 
+  integrity sha512-O0NSAECHK9f3DZK6wy56PZzp8b/7KSdfpJs8DSC7vnXUAoMPCTtchBKLzMtUsNlijiJFeJjSxNdQfjWXgyur5A==
 
+  dependencies:
 
+    "@babel/runtime" "^7.4.4"
 
+    "@emotion/hash" "^0.7.1"
 
+    "@material-ui/types" "^4.1.1"
 
+    "@material-ui/utils" "^4.1.0"
 
+    clsx "^1.0.2"
 
+    csstype "^2.5.2"
 
+    deepmerge "^4.0.0"
 
+    hoist-non-react-statics "^3.2.1"
 
+    jss "^10.0.0"
 
+    jss-plugin-camel-case "^10.0.0"
 
+    jss-plugin-default-unit "^10.0.0"
 
+    jss-plugin-global "^10.0.0"
 
+    jss-plugin-nested "^10.0.0"
 
+    jss-plugin-props-sort "^10.0.0"
 
+    jss-plugin-rule-value-function "^10.0.0"
 
+    jss-plugin-vendor-prefixer "^10.0.0"
 
+    prop-types "^15.7.2"
 
+
 
+"@material-ui/system@^4.5.0":
 
+  version "4.5.0"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.5.0.tgz#3235f5d7da8b8af4df425e4f065990c16dee8097"
 
+  integrity sha512-vR0PbMTzLnuuVCoYNQ13zyhLa/4s/UA9P9JbNuHBOOkfrHn53ShINiG0v05EgfwizfULLtc7mNvsGAgIyyp/hQ==
 
+  dependencies:
 
+    "@babel/runtime" "^7.4.4"
 
+    deepmerge "^4.0.0"
 
+    prop-types "^15.7.2"
 
+
 
+"@material-ui/types@^4.1.1":
 
+  version "4.1.1"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b"
 
+  integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==
 
+  dependencies:
 
+    "@types/react" "*"
 
+
 
+"@material-ui/utils@^4.1.0", "@material-ui/utils@^4.4.0":
 
+  version "4.4.0"
 
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.4.0.tgz#9275421e2798a067850d201212d46f12725828ad"
 
+  integrity sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==
 
+  dependencies:
 
+    "@babel/runtime" "^7.4.4"
 
+    prop-types "^15.7.2"
 
+    react-is "^16.8.6"
 
+
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
 
   version "2.2.1"
 
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
 
@@ -1263,11 +1351,31 @@
 
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
 
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
 
+"@types/prop-types@*":
 
+  version "15.7.3"
 
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
 
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+
 
 "@types/q@^1.5.1":
 
   version "1.5.2"
 
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
 
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
 
+"@types/react-transition-group@^4.2.0":
 
+  version "4.2.3"
 
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470"
 
+  integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==
 
+  dependencies:
 
+    "@types/react" "*"
 
+
 
+"@types/react@*":
 
+  version "16.9.5"
 
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.5.tgz#079dabd918b19b32118c25fd00a786bb6d0d5e51"
 
+  integrity sha512-jQ12VMiFOWYlp+j66dghOWcmDDwhca0bnlcTxS4Qz/fh5gi6wpaZDthPEu/Gc/YlAuO87vbiUXL8qKstFvuOaA==
 
+  dependencies:
 
+    "@types/prop-types" "*"
 
+    csstype "^2.2.0"
 
+
 
 "@types/stack-utils@^1.0.1":
 
   version "1.0.1"
 
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
 
@@ -2483,6 +2591,11 @@ clone-deep@^4.0.1:
 
     kind-of "^6.0.2"
 
     shallow-clone "^3.0.0"
 
 
+clsx@^1.0.2:
 
+  version "1.0.4"
 
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
 
+  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
 
+
 
 co@^4.6.0:
 
   version "4.6.0"
 
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
@@ -2671,6 +2784,11 @@ content-type@~1.0.4:
 
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
 
+convert-css-length@^2.0.1:
 
+  version "2.0.1"
 
+  resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c"
 
+  integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==
 
+
 
 convert-source-map@1.6.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0:
 
   version "1.6.0"
 
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
 
@@ -2900,6 +3018,14 @@ css-unit-converter@^1.1.1:
 
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
 
   integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
 
 
+css-vendor@^2.0.6:
 
+  version "2.0.7"
 
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
 
+  integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
 
+  dependencies:
 
+    "@babel/runtime" "^7.6.2"
 
+    is-in-browser "^1.0.2"
 
+
 
 css-what@2.1, css-what@^2.1.2:
 
   version "2.1.3"
 
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
 
@@ -3017,6 +3143,11 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
 
   dependencies:
 
     cssom "0.3.x"
 
 
+csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.6:
 
+  version "2.6.7"
 
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
 
+  integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+
 
 cyclist@^1.0.1:
 
   version "1.0.1"
 
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
 
@@ -3116,6 +3247,11 @@ deep-is@~0.1.3:
 
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
 
+deepmerge@^4.0.0:
 
+  version "4.1.1"
 
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.1.1.tgz#ee0866e4019fe62c1276b9062d4c4803d9aea14c"
 
+  integrity sha512-+qO5WbNBKBaZez95TffdUDnGIo4+r5kmsX8aOb7PDHvXsTbghAmleuxjs6ytNaf5Eg4FGBXDS5vqO61TRi6BMg==
 
+
 
 default-gateway@^4.2.0:
 
   version "4.2.0"
 
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
 
@@ -3287,6 +3423,14 @@ dom-converter@^0.2:
 
   dependencies:
 
     utila "~0.4"
 
 
+dom-helpers@^5.0.1:
 
+  version "5.1.0"
 
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.0.tgz#57a726de04abcc2a8bbfe664b3e21c584bde514e"
 
+  integrity sha512-zRRYDhpiKuAJHasOqCm7lBnsd22nrM4+OYI4ASWCxen+ocTMl7BIAKgGag97TlLiTl6rrau5aPe1VGUm9jQBng==
 
+  dependencies:
 
+    "@babel/runtime" "^7.5.5"
 
+    csstype "^2.6.6"
 
+
 
 dom-serializer@0:
 
   version "0.2.1"
 
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
 
@@ -4496,6 +4640,13 @@ hmac-drbg@^1.0.0:
 
     minimalistic-assert "^1.0.0"
 
     minimalistic-crypto-utils "^1.0.1"
 
 
+hoist-non-react-statics@^3.2.1:
 
+  version "3.3.0"
 
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
 
+  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
 
+  dependencies:
 
+    react-is "^16.7.0"
 
+
 
 hosted-git-info@^2.1.4:
 
   version "2.8.5"
 
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
 
@@ -4650,6 +4801,11 @@ https-browserify@^1.0.0:
 
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
 
+hyphenate-style-name@^1.0.3:
 
+  version "1.0.3"
 
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
 
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
+
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
 
   version "0.4.24"
 
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
 
@@ -5027,6 +5183,11 @@ is-glob@^4.0.0, is-glob@^4.0.1:
 
   dependencies:
 
     is-extglob "^2.1.1"
 
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
 
+  version "1.1.3"
 
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
 
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
 
+
 
 is-number@^3.0.0:
 
   version "3.0.0"
 
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
 
@@ -5070,6 +5231,13 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
 
   dependencies:
 
     isobject "^3.0.1"
 
 
+is-plain-object@^3.0.0:
 
+  version "3.0.0"
 
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
 
+  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
 
+  dependencies:
 
+    isobject "^4.0.0"
 
+
 
 is-promise@^2.1.0:
 
   version "2.1.0"
 
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
 
@@ -5153,6 +5321,11 @@ isobject@^3.0.0, isobject@^3.0.1:
 
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
 
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 
+isobject@^4.0.0:
 
+  version "4.0.0"
 
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
 
+  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
 
+
 
 isstream@~0.1.2:
 
   version "0.1.2"
 
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
@@ -5753,6 +5926,75 @@ jsprim@^1.2.2:
 
     json-schema "0.2.3"
 
     verror "1.10.0"
 
 
+jss-plugin-camel-case@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
 
+  integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    hyphenate-style-name "^1.0.3"
 
+    jss "10.0.0"
 
+
 
+jss-plugin-default-unit@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
 
+  integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    jss "10.0.0"
 
+
 
+jss-plugin-global@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
 
+  integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    jss "10.0.0"
 
+
 
+jss-plugin-nested@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
 
+  integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    jss "10.0.0"
 
+    tiny-warning "^1.0.2"
 
+
 
+jss-plugin-props-sort@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
 
+  integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    jss "10.0.0"
 
+
 
+jss-plugin-rule-value-function@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
 
+  integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    jss "10.0.0"
 
+
 
+jss-plugin-vendor-prefixer@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
 
+  integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    css-vendor "^2.0.6"
 
+    jss "10.0.0"
 
+
 
+jss@10.0.0, jss@^10.0.0:
 
+  version "10.0.0"
 
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
 
+  integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
 
+  dependencies:
 
+    "@babel/runtime" "^7.3.1"
 
+    csstype "^2.6.5"
 
+    is-in-browser "^1.1.3"
 
+    tiny-warning "^1.0.2"
 
+
 
 jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
 
   version "2.2.1"
 
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz#4d4973ebf8b9d2837ee91a8208cc66f3a2776cfb"
 
@@ -6475,6 +6717,11 @@ normalize-range@^0.1.2:
 
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
 
+normalize-scroll-left@^0.2.0:
 
+  version "0.2.0"
 
+  resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c"
 
+  integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==
 
+
 
 normalize-url@1.9.1:
 
   version "1.9.1"
 
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
 
@@ -7056,6 +7303,11 @@ pnp-webpack-plugin@1.5.0:
 
   dependencies:
 
     ts-pnp "^1.1.2"
 
 
+popper.js@^1.14.1:
 
+  version "1.15.0"
 
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
 
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
 
+
 
 portfinder@^1.0.9:
 
   version "1.0.24"
 
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.24.tgz#11efbc6865f12f37624b6531ead1d809ed965cfa"
 
@@ -8025,7 +8277,14 @@ react-error-overlay@^6.0.3:
 
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
 
   integrity sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw==
 
 
-react-is@^16.8.1, react-is@^16.8.4:
 
+react-google-font-loader@^1.1.0:
 
+  version "1.1.0"
 
+  resolved "https://registry.yarnpkg.com/react-google-font-loader/-/react-google-font-loader-1.1.0.tgz#9c9ae97aae3d2177e922c9bf4ab6312b903abc79"
 
+  integrity sha512-mnPYxBdhYEldTtREYPKllbmMvCGkTbpdmNjR6iTM3eTNWcg17OrfXjq9HRDZe+1+mhnUnI/AOcpvG0LIQPcLIw==
 
+  dependencies:
 
+    prop-types "^15.6.2"
 
+
 
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
 
   version "16.10.2"
 
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
 
   integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
 
@@ -8091,6 +8350,16 @@ react-scripts@3.2.0:
 
   optionalDependencies:
 
     fsevents "2.0.7"
 
 
+react-transition-group@^4.3.0:
 
+  version "4.3.0"
 
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
 
+  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
 
+  dependencies:
 
+    "@babel/runtime" "^7.5.5"
 
+    dom-helpers "^5.0.1"
 
+    loose-envify "^1.4.0"
 
+    prop-types "^15.6.2"
 
+
 
 react@^16.10.2:
 
   version "16.10.2"
 
   resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
 
@@ -9309,6 +9578,11 @@ timsort@^0.3.0:
 
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
 
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
 
+tiny-warning@^1.0.2:
 
+  version "1.0.3"
 
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
 
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+
 
 tmp@^0.0.33:
 
   version "0.0.33"
 
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"