rheinefuerrheine/frontend/src/components/Sidebar.tsx

63 lines
1.7 KiB
TypeScript

import { Box, Divider } from "@mui/material"
import SidebarElement from "./SidebarElement"
import { ArrowBack, Home, Logout, Newspaper, Person, TableChartOutlined, Event } from "@mui/icons-material"
function Sidebar() {
return (
<Box sx={{
width: "250px",
height: "100vh",
position: "fixed",
top: "0",
left: "0",
backgroundColor: "#121212",
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%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "2px",
}}>
<SidebarElement Title="Dashboard" Icon={Home} Path="/admin/dashboard" />
<SidebarElement Title="Daten import" Icon={TableChartOutlined} Path="/admin/import" />
<SidebarElement Title="Kalender" Icon={Event} Path="/admin/Kalender" />
<SidebarElement Title="Benutzer" Icon={Person} Path="/admin/benutzer" />
<SidebarElement Title="Zur Website" Icon={ArrowBack} Path="/" sx={{
mt: "auto",
}} />
<SidebarElement Title="Logout" Icon={Logout} Path="/admin/logout" />
</Box>
</Box>
)
}
export default Sidebar