import * as React from
"react"
;
import Box from
"@mui/material/Box"
;
import Drawer from
"@mui/material/Drawer"
;
import CssBaseline from
"@mui/material/CssBaseline"
;
import AppBar from
"@mui/material/AppBar"
;
import Toolbar from
"@mui/material/Toolbar"
;
import List from
"@mui/material/List"
;
import Typography from
"@mui/material/Typography"
;
import Divider from
"@mui/material/Divider"
;
import ListItem from
"@mui/material/ListItem"
;
import ListItemButton from
"@mui/material/ListItemButton"
;
import ListItemIcon from
"@mui/material/ListItemIcon"
;
import ListItemText from
"@mui/material/ListItemText"
;
import CodeIcon from
"@mui/icons-material/Code"
;
import DeveloperModeIcon from
"@mui/icons-material/DeveloperMode"
;
const drawerWidth = 240;
export
default
function
PermanentDrawerLeft() {
return
(
<Box sx={{ display:
"flex"
}}>
<CssBaseline />
<AppBar
position=
"fixed"
sx={{ width: `calc(100% - ${drawerWidth}px)`,
ml: `${drawerWidth}px` }}
color=
"success"
>
<Toolbar>
<Typography variant=
"h6"
noWrap component=
"div"
>
GeeksForGeeks
</Typography>
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper"
: {
width: drawerWidth,
boxSizing:
"border-box"
}
}}
variant=
"permanent"
anchor=
"left"
>
<Toolbar />
<Divider />
<List>
{[
"Practice"
,
"Write"
,
"DSA"
,
"Technical Scripter"
].map(
(text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <CodeIcon /> :
<DeveloperModeIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
)
)}
</List>
</Drawer>
<Box
component=
"main"
sx={{ flexGrow: 1, bgcolor:
"background.default"
, p: 3 }}
>
<Toolbar />
<Typography paragraph>
Greetings to all the Geeks out there! We
welcome you to the platform where we consistently
strive to offer the best of education. This
platform has been designed
for
every geek
wishing to expand their knowledge, share their
knowledge and is ready to grab their dream job.
We have millions of articles, live as wellas
online courses, thousands of tutorials and
much more just
for
the geek inside you.
Thank you
for
choosing and supporting us!
</Typography>
</Box>
</Box>
);
}