Start to build main screen

src/ui/routes/MainRoute.tsx

@@ -4,14 +4,154 @@
  * @author Pierre Hubert
  */
 
-import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
+import {
+	AppBar,
+	Badge,
+	Divider,
+	IconButton,
+	List,
+	ListItem,
+	ListItemIcon,
+	ListItemText,
+	makeStyles,
+	Paper,
+	Toolbar,
+	Typography,
+} from "@material-ui/core";
+import DraftsIcon from "@material-ui/icons/Drafts";
+import InboxIcon from "@material-ui/icons/Inbox";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+	},
+	toolbar: {
+		paddingRight: 24, // keep right padding when drawer closed
+	},
+	toolbarIcon: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		padding: "0 8px",
+		...theme.mixins.toolbar,
+	},
+	appBar: {
+		zIndex: theme.zIndex.drawer + 1,
+		marginLeft: drawerWidth,
+		width: `100%`,
+		color: "white",
+	},
+	menuButton: {
+		marginRight: 36,
+	},
+	menuButtonHidden: {
+		display: "none",
+	},
+	title: {
+		flexGrow: 1,
+	},
+	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",
+	},
+	fixedHeight: {
+		height: 240,
+	},
+}));
+
+function Menu() {
+	const classes = useStyles();
+
+	return (
+		<div>
+			<List component="nav" aria-label="main mailbox folders">
+				<ListItem button>
+					<ListItemIcon>
+						<InboxIcon />
+					</ListItemIcon>
+					<ListItemText primary="Inbox" />
+				</ListItem>
+				<ListItem button>
+					<ListItemIcon>
+						<DraftsIcon />
+					</ListItemIcon>
+					<ListItemText primary="Drafts" />
+				</ListItem>
+			</List>
+			<Divider />
+			<List component="nav" aria-label="secondary mailbox folders">
+				<ListItem button>
+					<ListItemText primary="Trash" />
+				</ListItem>
+			</List>
+		</div>
+	);
+}
 
 export function MainRoute() {
+	const classes = useStyles();
 	return (
 		<Router>
-			<Switch>
-				<Route path="*">Not found</Route>
-			</Switch>
+			<AppBar position="absolute" className={classes.appBar}>
+				<Toolbar className={classes.toolbar}>
+					<Typography
+						component="h1"
+						variant="h6"
+						color="inherit"
+						noWrap
+						className={classes.title}
+					>
+						Comunic Admin
+					</Typography>
+					<IconButton color="inherit">
+						<Badge badgeContent={4} color="secondary">
+							<NotificationsIcon />
+						</Badge>
+					</IconButton>
+				</Toolbar>
+			</AppBar>
+			<div
+				style={{
+					display: "flex",
+					height: "100%",
+					flexDirection: "row",
+					width: "100%",
+					marginTop: "64px",
+				}}
+			>
+				<Paper style={{ width: "200px" }}>
+					<Menu></Menu>
+				</Paper>
+
+				<div>
+					<Switch>
+						<Route path="*">
+							<p>yes</p>
+							<p>yes</p>
+							<p>yes</p>
+							<p>yes</p>
+							<p>yes</p>Not found
+						</Route>
+					</Switch>
+				</div>
+			</div>
 		</Router>
 	);
 }