57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
import { Box, Divider } from "@mui/material"
|
||
|
|
import SidebarElement from "./SidebarElement"
|
||
|
|
import { Home, Newspaper, Person, Savings } from "@mui/icons-material"
|
||
|
|
|
||
|
|
function Sidebar() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{
|
||
|
|
width: "250px",
|
||
|
|
height: "100vh",
|
||
|
|
position: "fixed",
|
||
|
|
top: "0",
|
||
|
|
left: "0",
|
||
|
|
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
boxShadow: "0 0 10px #00000055",
|
||
|
|
|
||
|
|
zIndex: 1000,
|
||
|
|
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "flex-start",
|
||
|
|
alignItems: "center",
|
||
|
|
|
||
|
|
py: "10px",
|
||
|
|
}}>
|
||
|
|
<img src="/logo.png" alt="logo" style={{
|
||
|
|
width: "80%",
|
||
|
|
marginBottom: "10px",
|
||
|
|
}} />
|
||
|
|
|
||
|
|
<Divider sx={{
|
||
|
|
width: "100%",
|
||
|
|
height: "1px",
|
||
|
|
|
||
|
|
mb: "5px",
|
||
|
|
}} />
|
||
|
|
|
||
|
|
<Box sx={{
|
||
|
|
width: "100%",
|
||
|
|
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
gap: "2px",
|
||
|
|
}}>
|
||
|
|
<SidebarElement Title="Dashboard" Icon={Home} Path="/admin/dashboard" />
|
||
|
|
<SidebarElement Title="Artikel" Icon={Newspaper} Path="/admin/artikel" />
|
||
|
|
<SidebarElement Title="Sponsoren" Icon={Savings} Path="/admin/sponsoren" />
|
||
|
|
<SidebarElement Title="Benutzer" Icon={Person} Path="/admin/benutzer" />
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Sidebar
|