diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx index 7eda5937b940681e8fd5cb6039c5303dc6be6f63..99b3448459007f960afbfdacbfefac747d0e5d9a 100644 --- a/src/components/HomePage/HomePage.tsx +++ b/src/components/HomePage/HomePage.tsx @@ -1,3 +1,104 @@ import React, { FC } from 'react'; +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Drawer from '@material-ui/core/Drawer'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import List from '@material-ui/core/List'; +import Typography from '@material-ui/core/Typography'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; -export const HomePage: FC = () => <div>Welcome</div>; +const drawerWidth = 240; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + }, + drawerPaper: { + width: drawerWidth, + }, + drawerContainer: { + overflow: 'auto', + }, + content: { + flexGrow: 1, + padding: theme.spacing(3), + }, + }), +); + +export const HomePage: FC = () => { + const classes = useStyles(); + + return ( + <div className={classes.root}> + <CssBaseline /> + <AppBar position="fixed" className={classes.appBar}> + <Toolbar> + <Typography variant="h6" noWrap> + Moveaid + </Typography> + </Toolbar> + </AppBar> + <Drawer + className={classes.drawer} + variant="permanent" + classes={{ + paper: classes.drawerPaper, + }} + > + <Toolbar /> + <div className={classes.drawerContainer}> + <List> + {['Reservation'].map((text) => ( + <ListItem button key={text}> + <ListItemText primary={text} /> + </ListItem> + ))} + </List> + </div> + </Drawer> + <main className={classes.content}> + <Toolbar /> + <Typography paragraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. + </Typography> + <Typography paragraph> + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a. + </Typography> + </main> + </div> + ); +};