62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import {
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
SelectChangeEvent,
|
|
} from "@mui/material";
|
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
|
|
import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
|
|
import { Em } from "./DropDown.styled";
|
|
import PageLinks from "../../../../components/PageLinks/PageLinks";
|
|
|
|
interface Props {
|
|
onChange?: (event: SelectChangeEvent<string>) => void;
|
|
}
|
|
|
|
export default function SidebarDropdown({ onChange }: Props) {
|
|
const [value, setValue] = React.useState("");
|
|
|
|
const handleChange = (event: SelectChangeEvent<string>) => {
|
|
setValue(event.target.value);
|
|
onChange?.(event);
|
|
};
|
|
|
|
return (
|
|
<FormControl fullWidth variant="outlined" sx={{ maxWidth: 200 }}>
|
|
<InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>
|
|
<Select
|
|
labelId="sidebar-dropdown-label"
|
|
value={value}
|
|
onChange={handleChange}
|
|
label="Navigate To"
|
|
MenuProps={{
|
|
PaperProps: {
|
|
style: {
|
|
backgroundColor: "rgba(30, 30, 30, 0.7)", // 0.9 opacity
|
|
maxHeight: 200,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem value="" disabled>
|
|
<Em>
|
|
Select a page
|
|
<ChevronRightIcon fontSize="small" sx={{ ml: 1 }} />
|
|
</Em>
|
|
</MenuItem>
|
|
{SIDEBAR_LINKS.map((link: ISidebarLink) => (
|
|
<PageLinks
|
|
key={link.path}
|
|
title={link.title}
|
|
path={link.path}
|
|
icon={link.icon}
|
|
/>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|