React component for faster and simpler web development.
MpDS Side-Menu is available as an [npm package](npm i mpds-side-menu).
// with npm
npm i mpds-side-menu
Here is a quick example to get you started, it's all you need:
import * as React from "react";
import MpDSSideMenu from "mpds-side-menu";
function App() {
return <MpDSSideMenu linkSelectedName="Link2"></MpDSSideMenu>;
}
ReactDOM.render(<App />, document.querySelector("#app"));| Name | Description | Default |
|---|---|---|
| sectionsItems |
Array that has all the information about the section items: link, icon and itemTitle.
Array<{ link: string; icon: string; itemTitle: string }>
|
[ { link: "/", icon: ( ) itemTitle: ( Dashboard ), }, { link: "/settings", icon: ( ), itemTitle: ( Settings ), }, { link: "/wounds", icon: ( ), itemTitle: ( WOUNDS ), }, ], |
| userLinks |
Array of objects that will build the links inside of the user accordion.
Array<{classNames: string; onClick: React.MouseEventHandler;name: string;}>
|
[ { classNames: "", onClick: console.log("Click!"), name: "Settings", }, { classNames: "", onClick: console.log("Click!"), name: "Log Out", }, ], |
| onClickCloseIcon |
onClick to close the menu.
React.MouseEventHandler
|
- |
| editLinkList |
Name the main link to edit.
string
|
"Edit" |
| editLinkListClick |
onClick of the edit link.
React.MouseEventHandler
|
- |
| listOfLinks |
Array that has all the info of the links that can be selected.
Array<{ rowKey: any; name: string }>
|
[ { rowKey: 1, name: "Link1", }, { rowKey: 2, name: "Link2", }, { rowKey: 3, name: "Link3", }, ] |
| selectedItemList |
The selection values of the sections links.
boolean
|
- |
| onChangeExpandedPanelListOfLinks |
onChange of the expanded panel list of links.
(
event: ChangeEvent<{}>,
expanded: boolean
) => void | undefined;
|
- |
| expandedIconColor |
onChange of the expanded panel list of links.
"inherit" | "disabled" | "primary" | "secondary" | "action" | "error" | undefined;
|
"inherit" |
| linkSelectedName |
The name of the selected link.
string
|
"SelectedLink" |
| selectedLinkColor |
Color of the selected link.
"inherit" | "primary" | "secondary" | "error" | "initial" | "textPrimary" | "textSecondary" | undefined;
|
"textPrimary" |
| selectedLinkColor |
Color of the selected link.
"inherit" | "primary" | "secondary" | "error" | "initial" | "textPrimary" | "textSecondary" | undefined;
|
"textPrimary" |
| selectedLinkColor |
Color of the selected link.
"inherit" | "primary" | "secondary" | "error" | "initial" | "textPrimary" | "textSecondary" | undefined;
|
"textPrimary" |
| onClickLinkList |
onClick of the links.
React.MouseEventHandler
|
- |
| userName |
Name of the userName.
string
|
"Jane Doe" |
| userNameColor |
Color text of the userName.
string
|
"#494949" |
| userSpeciality |
Speciality of the user.
string
|
"Nurse" |
| userSpecialityColor |
Text color of user speciality.
string
|
"#494949" |
| userLinksColor |
Text color of the user links.
"inherit" | "primary" | "secondary" | "error" | "initial" | "textPrimary" | "textSecondary" | undefined;
|
"textPrimary" |
| userImageClasses |
Classes of the userImage.
string
|
- |
| hasImage |
Boolean value of the image existence.
boolean
|
false |
| pathUserPhoto |
User photo path.
string
|
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/440px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg" |
| defaultPathUserPhoto |
Default user photo.
any
|
"https://icons-for-free.com/iconfiles/png/512/timer+icon-1320183326214705150.png" |
| menuColor |
Background color of the menu.
string
|
#FCFCFC |
| isMenuOpenActive |
Boolean value of the menu state expansion.
boolean
|
true |
| linksItemsTextColor |
Text color of the links.
string
|
"#494949" |
Yes, it's really all you need to get started! Try it in: [CodeSandbox](https://codesandbox.io/)
No License. "(...) nobody else can copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation."