136 lines
2.9 KiB
TypeScript
136 lines
2.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { FC } from "react";
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
Typography,
|
||
|
|
ListItemButton,
|
||
|
|
ListItemIcon,
|
||
|
|
ListItemText,
|
||
|
|
ListItemSecondaryAction,
|
||
|
|
} from "@mui/material";
|
||
|
|
import Link from "next/link";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { fonts } from "../styles/theme";
|
||
|
|
|
||
|
|
const openWidth = 270;
|
||
|
|
const closedWidth = 100;
|
||
|
|
|
||
|
|
export const SidebarItem: FC = ({
|
||
|
|
name,
|
||
|
|
href,
|
||
|
|
Icon,
|
||
|
|
iconSize,
|
||
|
|
inset = false,
|
||
|
|
selected = false,
|
||
|
|
open = true,
|
||
|
|
badge,
|
||
|
|
target = "_self",
|
||
|
|
}: any) => (
|
||
|
|
<Link href={href} target={target}>
|
||
|
|
<ListItemButton
|
||
|
|
sx={{
|
||
|
|
p: 0,
|
||
|
|
mb: 1,
|
||
|
|
bl: iconSize === 0 ? "1px solid white" : "inherit",
|
||
|
|
}}
|
||
|
|
selected={selected}
|
||
|
|
>
|
||
|
|
{iconSize > 0 ? (
|
||
|
|
<ListItemIcon
|
||
|
|
sx={{
|
||
|
|
color: `white`,
|
||
|
|
minWidth: 0,
|
||
|
|
mr: 2,
|
||
|
|
textAlign: "center",
|
||
|
|
margin: open ? "0 8 0 0" : "0 auto",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: iconSize,
|
||
|
|
height: iconSize,
|
||
|
|
mr: 0.5,
|
||
|
|
mt: "-4px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon />
|
||
|
|
</Box>
|
||
|
|
</ListItemIcon>
|
||
|
|
) : (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: 30,
|
||
|
|
height: "28px",
|
||
|
|
position: "relative",
|
||
|
|
ml: "9px",
|
||
|
|
mr: "1px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: "1px",
|
||
|
|
height: "56px",
|
||
|
|
backgroundColor: "white",
|
||
|
|
position: "absolute",
|
||
|
|
left: "3px",
|
||
|
|
top: "-10px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: "42px",
|
||
|
|
height: "42px",
|
||
|
|
position: "absolute",
|
||
|
|
top: "-27px",
|
||
|
|
left: "3px",
|
||
|
|
border: "solid 1px #fff",
|
||
|
|
borderColor: "transparent transparent transparent #fff",
|
||
|
|
borderRadius: "60px",
|
||
|
|
rotate: "-35deg",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
)}
|
||
|
|
{open && (
|
||
|
|
<ListItemText
|
||
|
|
inset={inset}
|
||
|
|
primary={
|
||
|
|
<Typography
|
||
|
|
variant="body1"
|
||
|
|
sx={{
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: "bold",
|
||
|
|
border: 0,
|
||
|
|
textAlign: "left",
|
||
|
|
color: "white",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</Typography>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{badge && badge > 0 ? (
|
||
|
|
<ListItemSecondaryAction>
|
||
|
|
<Typography
|
||
|
|
color="textSecondary"
|
||
|
|
variant="body1"
|
||
|
|
className="badge"
|
||
|
|
sx={{
|
||
|
|
backgroundColor: "#FFB620",
|
||
|
|
color: "black !important",
|
||
|
|
borderRadius: 10,
|
||
|
|
px: 1,
|
||
|
|
fontSize: 12,
|
||
|
|
fontWeight: "bold",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{badge}
|
||
|
|
</Typography>
|
||
|
|
</ListItemSecondaryAction>
|
||
|
|
) : null}
|
||
|
|
</ListItemButton>
|
||
|
|
</Link>
|
||
|
|
);
|