88 lines
No EOL
2.8 KiB
TypeScript
88 lines
No EOL
2.8 KiB
TypeScript
import ReactDom from 'react-dom';
|
|
import React, { useState } from 'react';
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
import { Button, Divider, IconButton, List, ListItem } from '@material-ui/core';
|
|
import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
|
|
import {ChevronLeft, ChevronRight} from '@material-ui/icons';
|
|
|
|
const drawerWidth = 240;
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
root: {
|
|
display: 'flex'
|
|
},
|
|
appBar: {
|
|
transition: theme.transitions.create(['width', 'margin'], {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen
|
|
})
|
|
},
|
|
appBarShift: {
|
|
width: `calc(100% - ${drawerWidth}px)`,
|
|
marginLeft: drawerWidth,
|
|
transition: theme.transitions.create(['margin', 'width'], {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
},
|
|
drawer: {
|
|
width: drawerWidth,
|
|
flexShrink: 0,
|
|
},
|
|
drawerPaper: {
|
|
width: drawerWidth,
|
|
},
|
|
drawerHeader: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: theme.spacing(0, 1),
|
|
// necessary for content to be below app bar
|
|
...theme.mixins.toolbar,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
content: {
|
|
flexGrow: 1,
|
|
padding: theme.spacing(3),
|
|
transition: theme.transitions.create('margin', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
marginLeft: -drawerWidth,
|
|
},
|
|
contentShift: {
|
|
transition: theme.transitions.create('margin', {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
marginLeft: 0,
|
|
},
|
|
}));
|
|
|
|
export const Headline = () => {
|
|
const [v, setv] = useState(false);
|
|
const classes = useStyles();
|
|
const theme = useTheme();
|
|
|
|
return (<div className={classes.root}>
|
|
<Drawer variant='persistent' anchor='left' open={v} className={classes.drawer} classes={{paper:classes.drawerPaper}}>
|
|
<div className={classes.drawerHeader}>
|
|
<IconButton onClick={()=>setv(false)}>
|
|
{theme.direction === "ltr" ? <ChevronLeft /> : <ChevronRight />}
|
|
</IconButton>
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
<ListItem>
|
|
|
|
<div>NO</div>
|
|
</ListItem>
|
|
</List>
|
|
</Drawer>
|
|
<main className={([classes.content, v ? classes.contentShift: ""].join(" ").trim())}>
|
|
<h1>aaa{`a${v} ${classes.content}`}aaa</h1>
|
|
<Button onClick={() => setv(!v)}>open</Button>
|
|
</main>
|
|
</div>);
|
|
};
|
|
|
|
export default Headline; |