webhandle/menu-loader

Loads a set of menus into the response.locals object.

Install

npm install @webhandle/menu-loader

Configurization

{
	"@webhandle/menu-loader": {
		"publicFilesPrefix": "@webhandle/menu-loader/files"
		, "alwaysIncludeResources": false
		, "alwaysLoadMenus": true
		, "menusPath": "menus/mainset.json"
	}
}

alwaysIncludeResources will cause the css for menus to be loaded. The css is a nice starting point, but isn't what a site will always want.

alwaysLoadMenus will cause the menus to be loaded into the response.locals.menuTrees automatically.

menusPath is the location of the menus file.

Initialization

import setupMenuLoader from "@webhandle/menu-loader/initialize-webhandle-component.mjs"
let managerMenuLoader = await setupMenuLoader(webhandle)

Usage

res.locals.menuTrees will look like:

{
	"primary": {
		"id": 0,
		"label": "main",
		"children": [
			{
				"id": "1002",
				"label": "home2",
				"url": "",
				"attributes": {},
				"customClasses": "asfdasfasdf",
				"image": "",
				"parentId": 0,
				"children": []
			},
			{
				"id": 1003,
				"label": "contact",
				"url": "/contact",
				"attributes": {
					"one": "two"
				},
				"parentId": 0,
				"children": [
					{
						"id": 1005,
						"label": "contact child",
						"url": "/contact",
						"attributes": {},
						"parentId": 1003,
						"children": []
					},
					{
						"id": 1006,
						"label": "contact child 2",
						"url": "/contact",
						"attributes": {},
						"parentId": 1003,
						"children": []
					}
				]
			}
		]
	}
}

The keys of the object are the names of the various menus.

The menus/mainset.json file looks like the below, and can be edited with @webhandle/menu-set-editor.

{
	"menus": [
		{
			"name": "primary",
			"nodes": [
				{
					"id": 0,
					"label": "main"
				},
				{
					"id": "1002",
					"label": "home2",
					"url": "",
					"attributes": {},
					"customClasses": "asfdasfasdf",
					"image": "",
					"parentId": 0
				},
				{
					"id": 1003,
					"label": "contact",
					"url": "/contact",
					"attributes": {
						"one": "two"
					},
					"parentId": 0
				}
				,{
					"id": 1005,
					"label": "contact child",
					"url": "/contact",
					"attributes": {},
					"parentId": 1003
				}
				,{
					"id": 1006,
					"label": "contact child 2",
					"url": "/contact",
					"attributes": {},
					"parentId": 1003
				}
			]
		}
	]
}

To render a menu with dropdowns (or children of the top level elements if we're rendering a mobile menu) you can template it like:

<ul class="webhandle-menus-loader-drop-down">
__menuTrees.primary.children::@webhandle/menu-loader/menu-item-with-subgroup-li-ul__
</ul>

A more manual usage would include the files /@webhandle/menu-loader/files/css/styles.css and /@webhandle/menu-loader/files/js/menus.mjs and use the manger like:

(res, res, next) => {
	managerMenuLoader.addExternalResources(res.locals.externalResourceManager)
	managerMenuLoader.loadMenus(req, res, next)
}

menus.mjs has code to open and close the mobile menu.