Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import './App.css';
- 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 Divider from '@material-ui/core/Divider';
- import ListItem from '@material-ui/core/ListItem';
- import { ListItemText } from '@material-ui/core';
- const drawerWidth: any = 240;
- const drawerWidth2: any = 480;
- const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- display: 'flex',
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- drawer: {
- width: drawerWidth,
- flexShrink: 0,
- },
- drawerPaper: {
- width: drawerWidth,
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- },
- toolbar: theme.mixins.toolbar,
- }),
- );
- const useStyles2 = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- display: 'flex',
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- drawer: {
- width: drawerWidth2,
- flexShrink: 0,
- },
- drawerPaper: {
- width: drawerWidth2,
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- },
- toolbar: theme.mixins.toolbar,
- }),
- );
- const App: React.FC = () => {
- const classes = useStyles();
- const classes2 = useStyles2();
- return (
- <div className="App">
- <div className={classes.root}>
- <CssBaseline />
- <AppBar position="fixed" className={classes.appBar}>
- <Toolbar>
- <Typography variant="h6" noWrap>
- Clipped drawer
- </Typography>
- </Toolbar>
- </AppBar>
- <Drawer
- className={classes.drawer}
- variant="permanent"
- classes={{
- paper: classes.drawerPaper,
- }}
- >
- <div className={classes.toolbar} />
- <List>
- {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- <Divider />
- <List>
- {['All mail', 'Trash', 'Spam'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- </Drawer>
- <main className={classes.content}>
- <div className={classes2.root}>
- <CssBaseline />
- <AppBar position="fixed" className={classes2.appBar}>
- <Toolbar>
- <Typography variant="h6" noWrap>
- Clipped drawer
- </Typography>
- </Toolbar>
- </AppBar>
- <Drawer
- className={classes2.drawer}
- variant="permanent"
- classes={{
- paper: classes2.drawerPaper,
- }}
- >
- <div className={classes2.toolbar} />
- <List>
- {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- <Divider />
- <List>
- {['All mail', 'Trash', 'Spam'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- </Drawer>
- <main className={classes2.content}>
- <div className={classes2.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>
- </main>
- </div>
- </div>
- );
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement