menupro
v1.0.14
Published
custom menu like OS by Dario Passariello
Maintainers
passarielloReadme
NOTE
Create menu in your saas like Desktop App
install
npm i -D menuprosetup
On top of your project
import 'menupro'use
in your app (React too)
useEffect(() => {
menupro.start({
name: "menupro",
element: "#root>nav",
...json
})
}, [])OR
return (
<nav>
<menupro.start {
...{
name: "menupro",
element: "#root>nav",
...json
}
}
/>
</nav>
)
/>OR
parameters
"name" <-- the name for your element
"element" <-- where you want your menu append (usually NAV)
"...json" <-- the object contains your menu (see the json)
config
you can use a json to configure the menu. Here some ways...
const json = require("./menu.json")
or
import json from "./menu.json"example:
{
"author": "",
"charset": "UTF-8",
"title": "navmenu",
"short": "navmenu",
"keywords": "",
"nav": [
{
"name": "file",
"title": "",
"target": "",
"link": "",
"onclick": "",
"icon": "",
"lang": {
"en": "file"
},
"sub": [
{
"name": "test_file_1_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/list-alt.svg' />",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": "test_file_2_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/tasks.svg' />",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": ""
},
{
"name": "test_file_3_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/thumbtack.svg' />",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": "test_file_4_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/users.svg' />",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_file_2_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_file_3_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/users-cog.svg' />",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": ""
},
{
"name": "test_file_3_2",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/wifi.svg' />",
"lang": {
"en": "test"
},
"sub": []
}
]
}
]
},
{
"name": "test_file_5_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "<img src='/assets/icons/wrench.svg' />",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_file_2_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_file_3_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": "test_file_3_2",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
}
]
}
]
}
]
},
{
"name": "edit",
"title": "",
"target": "",
"link": "",
"onclick": "",
"icon": "",
"lang": {
"en": "edit"
},
"sub": [
{
"name": "test_edit_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_edit_1_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": "test_edit_1_2",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
},
{
"name": ""
},
{
"name": "test_edit_1_3",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": [
{
"name": "test_edit_2_1",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
}
]
},
{
"name": "test_edit_1_4",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "test"
},
"sub": []
}
]
}
]
},
{
"name": "selection",
"title": "",
"target": "",
"link": "",
"onclick": "message('test')",
"icon": "",
"lang": {
"en": "selection"
},
"sub": []
}
]
}