React UI updated

wallet-spa/package.json

@@ -11,8 +11,10 @@
     "@types/node": "^14.11.2",
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
+    "font-awesome": "^4.7.0",
     "fontsource-roboto": "^3.0.3",
     "jquery": "^3.4.1",
+    "node-sass": "^4.14.1",
     "oidc-client": "^1.8.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

wallet-spa/src/components/Header.jsx

@@ -0,0 +1,131 @@
+import React from "react";
+import classNames from "classnames"
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from '@material-ui/icons/Menu';
+import PropTypes from "prop-types"
+import { withStyles } from "@material-ui/core/styles";
+import { fade } from "@material-ui/core/styles/colorManipulator"
+
+const styles = (theme) => ({
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    // marginLeft: theme.drawer.width,
+    width: `calc(100% - ${theme.drawer.width}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  root: {
+    width: "100%",
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  title: {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      display: "block",
+    },
+  },
+  search: {
+    position: "relative",
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    "&:hover": {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing.unit * 2,
+    marginLeft: 0,
+    width: "100%",
+    [theme.breakpoints.up("sm")]: {
+      marginLeft: theme.spacing.unit * 3,
+      width: "auto",
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: "100%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  inputRoot: {
+    color: "inherit",
+    width: "100%",
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create("width"),
+    width: "100%",
+    [theme.breakpoints.up("md")]: {
+      width: 200,
+    },
+  },
+  sectionDesktop: {
+    display: "none",
+    [theme.breakpoints.up("md")]: {
+      display: "flex",
+    },
+  },
+  sectionMobile: {
+    display: "flex",
+    [theme.breakpoints.up("md")]: {
+      display: "none",
+    },
+  },
+})
+
+class Header extends React.Component {
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+
+    const { handleChangeNavDrawer, navDrawerOpen, classes } = this.props
+
+    return (
+      <AppBar position="fixed" className={classNames(classes.appBar, {
+        [classes.appBarShift]: navDrawerOpen,
+      })}>
+        <Toolbar>
+          <IconButton
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="Open drawer"
+              onClick={handleChangeNavDrawer}
+            >
+              <MenuIcon />
+            </IconButton>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+}
+
+Header.propTypes = {
+  styles: PropTypes.object,
+  handleChangeNavDrawer: PropTypes.func,
+  classes: PropTypes.object,
+  navDrawerOpen: PropTypes.bool,
+}
+export default withStyles(styles)(Header)

wallet-spa/src/components/Layout.jsx

@@ -1,33 +1,81 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/styles';
-import TopMenu from "../components/TopMenu";
+import Header from "./Header";
 import SideMenu from "../components/SideMenu";
 import Footer from "../components/Footer";
 import MainContent from "../components/MainContent";
+import { ThemeProvider } from "@material-ui/core/styles";
+import defaultTheme, { customTheme } from "../theme";
+import classNames from "classnames";
 
-const styles = theme => ({
-  root: {
-    display: 'flex'
+const styles = () => ({
+  container: {
+    margin: "80px 20px 20px 15px",
+    paddingLeft: defaultTheme.drawer.width,
+    [defaultTheme.breakpoints.down("sm")]: {
+      paddingLeft: 0
+    }
   },
+  containerFull: {
+    paddingLeft: defaultTheme.drawer.miniWidth,
+    [defaultTheme.breakpoints.down("sm")]: {
+      paddingLeft: 0
+    }
+  },
+  settingBtn: {
+    top: 80,
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    color: "white",
+    width: 48,
+    right: 0,
+    height: 48,
+    opacity: 0.9,
+    padding: 0,
+    zIndex: 999,
+    position: "fixed",
+    minWidth: 48,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  }
 });
 
 class Layout extends React.Component {
   static displayName = Layout.name;
-
   constructor(props) {
     super(props);
+
+    this.state = {
+      theme: defaultTheme,
+      rightDrawerOpen: false,
+      navDrawerOpen:
+        window && window.innerWidth && window.innerWidth >= defaultTheme.breakpoints.values.md
+          ? true
+          : false
+    };
+
+    this.handleChangeNavDrawer = this.handleChangeNavDrawer.bind(this);
+  }
+
+  handleChangeNavDrawer() {
+    this.setState({
+      navDrawerOpen: !this.state.navDrawerOpen
+    });
   }
 
   render() {
     const { classes } = this.props;
+    const { navDrawerOpen, theme } = this.state;
     return (
-      <div className={classes.root}>
-        <TopMenu />
-        <SideMenu openIdManager={this.props.openIdManager} />
-        <MainContent openIdManager={this.props.openIdManager} />
+      <ThemeProvider theme={theme}>
+        <Header handleChangeNavDrawer={this.handleChangeNavDrawer} navDrawerOpen={navDrawerOpen} />
+        <SideMenu openIdManager={this.props.openIdManager} navDrawerOpen={navDrawerOpen}
+          handleChangeNavDrawer={this.handleChangeNavDrawer} />
+        <div className={classNames(classes.container, !navDrawerOpen && classes.containerFull)}>
+          <MainContent openIdManager={this.props.openIdManager} />
+        </div>
         <Footer />
-      </div>
+      </ThemeProvider>
     );
   }
 }