erdar2
4 years ago
4 changed files with 260 additions and 15 deletions
@ -1,15 +1,252 @@ |
|||
import React, { useState } from "react"; |
|||
import * as React from "react"; |
|||
import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles"; |
|||
import Box from "@mui/material/Box"; |
|||
import MuiDrawer from "@mui/material/Drawer"; |
|||
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"; |
|||
import Toolbar from "@mui/material/Toolbar"; |
|||
import List from "@mui/material/List"; |
|||
import CssBaseline from "@mui/material/CssBaseline"; |
|||
import Typography from "@mui/material/Typography"; |
|||
import Divider from "@mui/material/Divider"; |
|||
import IconButton from "@mui/material/IconButton"; |
|||
import MenuIcon from "@mui/icons-material/Menu"; |
|||
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; |
|||
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; |
|||
import ListItem from "@mui/material/ListItem"; |
|||
import ListItemIcon from "@mui/material/ListItemIcon"; |
|||
import ListItemText from "@mui/material/ListItemText"; |
|||
import InboxIcon from "@mui/icons-material/MoveToInbox"; |
|||
import MailIcon from "@mui/icons-material/Mail"; |
|||
import { Routes, Route, Link } from "react-router-dom"; |
|||
import Paper from "@mui/material/Paper"; |
|||
|
|||
export interface IUser { |
|||
name: string; |
|||
age: number; |
|||
const drawerWidth = 240; |
|||
|
|||
const openedMixin = (theme: Theme): CSSObject => ({ |
|||
width: drawerWidth, |
|||
transition: theme.transitions.create("width", { |
|||
easing: theme.transitions.easing.sharp, |
|||
duration: theme.transitions.duration.enteringScreen, |
|||
}), |
|||
overflowX: "hidden", |
|||
}); |
|||
|
|||
const closedMixin = (theme: Theme): CSSObject => ({ |
|||
transition: theme.transitions.create("width", { |
|||
easing: theme.transitions.easing.sharp, |
|||
duration: theme.transitions.duration.leavingScreen, |
|||
}), |
|||
overflowX: "hidden", |
|||
width: `calc(${theme.spacing(7)} + 1px)`, |
|||
[theme.breakpoints.up("sm")]: { |
|||
width: `calc(${theme.spacing(7)} + 1px)`, |
|||
}, |
|||
}); |
|||
|
|||
const DrawerHeader = styled("div")(({ theme }) => ({ |
|||
display: "flex", |
|||
alignItems: "center", |
|||
justifyContent: "flex-end", |
|||
padding: theme.spacing(0, 1), |
|||
// necessary for content to be below app bar
|
|||
...theme.mixins.toolbar, |
|||
})); |
|||
|
|||
interface AppBarProps extends MuiAppBarProps { |
|||
open?: boolean; |
|||
} |
|||
const App = () => { |
|||
return ( |
|||
<div> |
|||
<h1>Initial setup</h1> |
|||
</div> |
|||
); |
|||
|
|||
const AppBar = styled(MuiAppBar, { |
|||
shouldForwardProp: (prop) => prop !== "open", |
|||
})<AppBarProps>(({ theme, open }) => ({ |
|||
zIndex: theme.zIndex.drawer + 1, |
|||
transition: theme.transitions.create(["width", "margin"], { |
|||
easing: theme.transitions.easing.sharp, |
|||
duration: theme.transitions.duration.leavingScreen, |
|||
}), |
|||
...(open && { |
|||
marginLeft: drawerWidth, |
|||
width: `calc(100% - ${drawerWidth}px)`, |
|||
transition: theme.transitions.create(["width", "margin"], { |
|||
easing: theme.transitions.easing.sharp, |
|||
duration: theme.transitions.duration.enteringScreen, |
|||
}), |
|||
}), |
|||
})); |
|||
|
|||
const Drawer = styled(MuiDrawer, { |
|||
shouldForwardProp: (prop) => prop !== "open", |
|||
})(({ theme, open }) => ({ |
|||
width: drawerWidth, |
|||
flexShrink: 0, |
|||
whiteSpace: "nowrap", |
|||
boxSizing: "border-box", |
|||
...(open && { |
|||
...openedMixin(theme), |
|||
"& .MuiDrawer-paper": openedMixin(theme), |
|||
}), |
|||
...(!open && { |
|||
...closedMixin(theme), |
|||
"& .MuiDrawer-paper": closedMixin(theme), |
|||
}), |
|||
})); |
|||
|
|||
const Container = styled(Paper)(({ theme }) => ({ |
|||
...theme.typography.body2, |
|||
padding: 16 |
|||
})); |
|||
|
|||
export default function App() { |
|||
const theme = useTheme(); |
|||
const [open, setOpen] = React.useState(false); |
|||
|
|||
const handleDrawerOpen = () => { |
|||
setOpen(true); |
|||
}; |
|||
|
|||
export default App; |
|||
const handleDrawerClose = () => { |
|||
setOpen(false); |
|||
}; |
|||
|
|||
return ( |
|||
<Box sx={{ display: "flex" }}> |
|||
<CssBaseline /> |
|||
<AppBar position="fixed" open={open}> |
|||
<Toolbar> |
|||
<IconButton |
|||
color="inherit" |
|||
aria-label="open drawer" |
|||
onClick={handleDrawerOpen} |
|||
edge="start" |
|||
sx={{ |
|||
marginRight: "36px", |
|||
...(open && { display: "none" }), |
|||
}} |
|||
> |
|||
<MenuIcon /> |
|||
</IconButton> |
|||
<Typography variant="h6" noWrap component="div"> |
|||
Covid Statistics |
|||
</Typography> |
|||
</Toolbar> |
|||
</AppBar> |
|||
<Drawer variant="permanent" open={open}> |
|||
<DrawerHeader> |
|||
<IconButton onClick={handleDrawerClose}> |
|||
{theme.direction === "rtl" ? ( |
|||
<ChevronRightIcon /> |
|||
) : ( |
|||
<ChevronLeftIcon /> |
|||
)} |
|||
</IconButton> |
|||
</DrawerHeader> |
|||
<Divider /> |
|||
<List> |
|||
{["Inbox", "Starred", "Send email", "Drafts"].map( |
|||
(text, index) => ( |
|||
<ListItem button key={text}> |
|||
<ListItemIcon> |
|||
{index % 2 === 0 ? ( |
|||
<InboxIcon /> |
|||
) : ( |
|||
<MailIcon /> |
|||
)} |
|||
</ListItemIcon> |
|||
<ListItemText primary={text} /> |
|||
</ListItem> |
|||
) |
|||
)} |
|||
</List> |
|||
</Drawer> |
|||
<Box component="main" sx={{ flexGrow: 1, p: 3 }}> |
|||
<DrawerHeader /> |
|||
<Container> |
|||
<Routes> |
|||
<Route |
|||
path="/" |
|||
element={ |
|||
<> |
|||
<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> |
|||
</> |
|||
} |
|||
/> |
|||
<Route |
|||
path="/about" |
|||
element={ |
|||
<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> |
|||
} |
|||
/> |
|||
</Routes> |
|||
</Container> |
|||
</Box> |
|||
</Box> |
|||
); |
|||
} |
|||
|
|||
Loading…
Reference in new issue