58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import {
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
SelectChangeEvent,
|
|
} from "@mui/material";
|
|
import PageLinks from "../../../../components/PageLinks/PageLinks";
|
|
import { useSelector } from "react-redux";
|
|
import { selectNavigationSidebar } from "@/app/redux/metadata/selectors";
|
|
import "./DropDown.scss";
|
|
|
|
interface Props {
|
|
onChange?: (event: SelectChangeEvent<string>) => void;
|
|
}
|
|
|
|
export default function SidebarDropdown({ onChange }: Props) {
|
|
const [value, setValue] = React.useState("");
|
|
const sidebar = useSelector(selectNavigationSidebar)?.links;
|
|
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="sidebar-dropdown__container">
|
|
{sidebar?.map((link: SidebarItem) => (
|
|
<PageLinks
|
|
key={link.path}
|
|
title={link.title}
|
|
path={link.path}
|
|
icon={link.icon as string}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|