53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import {
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
SelectChangeEvent,
|
|
} from "@mui/material";
|
|
import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
|
|
import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
|
|
import PageLinks from "../../../../components/PageLinks/PageLinks";
|
|
import "./DropDown.scss";
|
|
|
|
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={{ minWidth: 200 }}>
|
|
<InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>
|
|
<Select
|
|
labelId="sidebar-dropdown-label"
|
|
value={value}
|
|
onChange={handleChange}
|
|
label="Navigate To"
|
|
MenuProps={{
|
|
PaperProps: {
|
|
style: {
|
|
maxHeight: 200,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<em className="em">Select a page</em>
|
|
<MenuItem value="" disabled></MenuItem>
|
|
<div className="dropdown-container">
|
|
{SIDEBAR_LINKS.map((link: ISidebarLink) => (
|
|
<PageLinks key={link.path} title={link.title} path={link.path} />
|
|
))}
|
|
</div>
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|