Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/goliatone/gmenu
Menu builder
https://github.com/goliatone/gmenu
Last synced: 11 days ago
JSON representation
Menu builder
- Host: GitHub
- URL: https://github.com/goliatone/gmenu
- Owner: goliatone
- Created: 2017-04-02T20:18:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T09:02:45.000Z (over 1 year ago)
- Last Synced: 2024-10-11T09:08:28.594Z (27 days ago)
- Language: JavaScript
- Size: 180 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## gmenu
Simple menu builder, a Node.js module to create menus in Express applications.
Builds an object with all nodes added to a menu, and makes it available to Express views as a local variable.
It supports lazy instantiation of menus, so you can add submenus before the parent menu has been defined. This is useful if you define your submenus inside your routes and your main menu on your app definition file.
You can attach arbitrary data to each node which can then be accessed for each item.
```javascript
const Menu = require('gmenu');
let adminMenu = new Menu('Admin');
let consoleMenu = Menu.get('admin').addNode('Web Console');
consoleMenu.addNode('WebSockets');
consoleMenu.addNode('Payloads');
consoleMenu.addNode('Requests');
let crudMenu = Menu.get('admin').addNode('Crud');
crudMenu.segment = 'api';
crudMenu.addNode('Users', {
data: {
resource: 'user'
}
});
crudMenu.addNode('Passports', {
data: {
resource: 'passport'
}
});
```
You then add the menu as a middleware:
```js
app.use(adminMenu.middleware.bind(adminMenu));
```
This will generate an object:
```json
{
"id": "admin",
"name": "Admin",
"depth": 0,
"isActive": false,
"uri": "/admin",
"data": {},
"keypath": "admin",
"nodes": [
{
"id": "web-console",
"name": "Web Console",
"depth": 1,
"isActive": false,
"uri": "/admin/web-console",
"data": {},
"keypath": "admin.web-console",
"nodes": [
{
"id": "websocket",
"name": "WebSocket",
"depth": 2,
"isActive": false,
"uri": "/admin/web-console/websocket",
"data": {},
"keypath": "admin.web-console.websocket",
},
{
"id": "payloads",
"name": "Payloads",
"depth": 2,
"isActive": false,
"uri": "/admin/web-console/payloads",
"data": {},
"keypath": "admin.web-console.payloads",
},
{
"id": "requests",
"name": "Requests",
"depth": 2,
"isActive": false,
"uri": "/admin/web-console/requests",
"data": {},
"keypath": "admin.web-console.requests",
}
]
},
{
"id": "crud",
"name": "Crud",
"depth": 1,
"isActive": false,
"uri": "/admin/api",
"data": {},
"keypath": "admin.crud",
"nodes": [
{
"id": "users",
"name": "Users",
"depth": 2,
"isActive": false,
"uri": "/admin/api/users",
"data": {
"resource": "user"
},
"keypath": "admin.crud.users",
},
{
"id": "passports",
"name": "Passports",
"depth": 2,
"isActive": false,
"uri": "/admin/api/passports",
"data": {
"resource": "passport"
},
"keypath": "admin.crud.passports",
}
]
}
]
}
```
The menu will be made available in the views as a local variable under the name returned by `menu.localName`. By default, the name will be `menu.id + 'Menu'`.
```ejs
- <%= menu.name %>
-
<%= item.name %>
<% adminMenu.nodes.map(menu => { %>
<% menu.nodes.map(item => { %>
<%});%>
<%});%>
```
### Documentation