Layout

package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.9.7",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "add": "^2.0.6",
+    "clsx": "^1.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "recharts": "^1.8.5",
+    "yarn": "^1.22.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,25 +1,16 @@
 import React from 'react';
-import logo from './logo.svg';
+import { ThemeProvider } from '@material-ui/core/styles';
+import Dashboard from "./Layout/Dashboard";
 import './App.css';
+import { theme } from './theme';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ThemeProvider theme={theme}>
+      <div className="App">
+        <Dashboard />
+      </div>
+    </ThemeProvider>
   );
 }
 

src/Layout/Dashboard.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+import Link from '@material-ui/core/Link';
+import Paper from '@material-ui/core/Paper';
+import {Header} from "./Header/Header";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    overflow: 'auto',
+    flexDirection: 'column',
+    minHeight: 'calc(100vh - 170px)'
+  },
+}));
+
+export default function Dashboard() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Header />
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer} />
+        <Container maxWidth="lg" className={classes.container}>
+          <Paper className={classes.paper}>
+            <h4>Main content</h4>
+          </Paper>
+          <Box pt={4}>
+            <Copyright />
+          </Box>
+        </Container>
+      </main>
+    </div>
+  );
+}

src/Layout/Header/Clusters.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from "@material-ui/core/Typography";
+import {ButtonWithPopup} from "../../components/ButtonWithPopup";
+
+export const Clusters = () => {
+  return (
+    <ButtonWithPopup
+      ButtonContent={() => (
+        <Typography component="span" color="inherit">
+          Scalecube
+        </Typography>
+      )}
+      popperPlacement="bottom-start"
+      popperOffset="70 20"
+    >
+      {({ isOpen, close }) => (
+        <MenuList onClick={close} autoFocusItem={isOpen}>
+          <MenuItem>CapsulaJS</MenuItem>
+          <MenuItem>OM2</MenuItem>
+        </MenuList>
+      )}
+    </ButtonWithPopup>
+  );
+};

src/Layout/Header/Header.jsx

@@ -0,0 +1,82 @@
+import CssBaseline from "@material-ui/core/CssBaseline";
+import AppBar from "@material-ui/core/AppBar";
+import clsx from "clsx";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import {Clusters} from "./Clusters";
+import {SettingsBlock} from "./SettingsBlock";
+import Menu from "./Menu";
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: {
+    paddingRight: 24,
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
+  },
+  menuButtonHidden: {
+    display: 'none',
+  },
+  centerBlock: {
+    flexGrow: 1,
+  },
+}));
+
+export const Header = () => {
+  const classes = useStyles();
+
+  const [isMenuOpened, setIsMenuOpened] = React.useState(false);
+  const openMenu = () => {
+    setIsMenuOpened(true);
+  };
+  const closeMenu = () => {
+    setIsMenuOpened(false);
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <AppBar position="absolute" className={clsx(classes.appBar, isMenuOpened && classes.appBarShift)}>
+        <Toolbar className={classes.toolbar}>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="open drawer"
+            onClick={openMenu}
+            className={clsx(classes.menuButton, isMenuOpened && classes.menuButtonHidden)}
+          >
+            <MenuIcon />
+          </IconButton>
+          <div className={classes.centerBlock}>
+            <Clusters />
+          </div>
+          <SettingsBlock />
+        </Toolbar>
+      </AppBar>
+      <Menu
+        isOpened={isMenuOpened}
+        close={closeMenu}
+      />
+    </>
+  )
+};

src/Layout/Header/Menu.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import clsx from "clsx";
+import IconButton from "@material-ui/core/IconButton";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Drawer from "@material-ui/core/Drawer";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  menuTitle: {
+    padding: '11px 20px',
+    textAlign: 'right',
+    margin: 0,
+    fontSize: '30px',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    color: theme.palette.primary.main,
+    display: 'flex'
+  },
+  menuLogo: {
+    marginRight: '10px'
+  },
+  toolbarIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: 240,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing(9),
+    },
+  },
+}));
+
+export default function Menu({ isOpened, close }) {
+  const classes = useStyles();
+
+  return (
+    <Drawer
+      classes={{
+        paper: clsx(classes.drawerPaper, !isOpened && classes.drawerPaperClose),
+      }}
+      open={isOpened}
+    >
+      <div className={classes.menuTitle}>
+        <img className={classes.menuLogo} src="/logo.png" alt="Robokit" width={40} />
+        <span>Robokit</span>
+      </div>
+      <div className={classes.toolbarIcon}>
+        <IconButton onClick={close}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </div>
+      <List
+        component="nav"
+        aria-labelledby="nested-list-subheader"
+        className={classes.root}
+      >
+        <ListSubheader component="div" id="nested-list-subheader">
+          Security
+        </ListSubheader>
+        <ListItem button>
+          <ListItemText primary="Secrets" />
+        </ListItem>
+        <ListSubheader component="div" id="nested-list-subheader">
+          Clusters
+        </ListSubheader>
+        <ListItem button>
+          <ListItemText primary="scalecube" />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="seed" />
+        </ListItem>
+      </List>
+    </Drawer>
+  );
+}

src/Layout/Header/SettingsBlock.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import {ButtonWithPopup} from "../../components/ButtonWithPopup";
+import IconButton from "@material-ui/core/IconButton";
+import Badge from "@material-ui/core/Badge";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import AddIcon from "@material-ui/icons/Add";
+import {makeStyles} from "@material-ui/core/styles";
+
+const Avatar = () => (
+  <img width={24} height={24} src="/avatar.jpeg" alt="avatar"/>
+);
+
+const useStyles = makeStyles(() => ({
+  iconButton: {
+    padding: '12px 0 12px 12px'
+  },
+}));
+
+export const SettingsBlock = () => {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <IconButton className={classes.iconButton} color="inherit">
+        <Badge badgeContent={4} color="secondary">
+          <NotificationsIcon />
+        </Badge>
+      </IconButton>
+      <IconButton className={classes.iconButton} color="inherit">
+        <ButtonWithPopup
+          ButtonContent={AddIcon}
+          popperPlacement="bottom-end"
+          popperOffset="4 20"
+        >
+          {({ isOpen, close }) => (
+            <MenuList onClick={close} autoFocusItem={isOpen}>
+              <MenuItem>New repository</MenuItem>
+              <MenuItem>Import repository</MenuItem>
+            </MenuList>
+          )}
+        </ButtonWithPopup>
+      </IconButton>
+      <IconButton className={classes.iconButton} color="inherit">
+        <ButtonWithPopup
+          ButtonContent={Avatar}
+          popperPlacement="bottom-end"
+          popperOffset="4 20"
+        >
+          {({ isOpen, close }) => (
+            <MenuList onClick={close} autoFocusItem={isOpen}>
+              <MenuItem>New repository</MenuItem>
+              <MenuItem>Import repository</MenuItem>
+            </MenuList>
+          )}
+        </ButtonWithPopup>
+      </IconButton>
+    </div>
+  );
+};