Using The Material Web Side Nav.md

Using The Material Web Side Nav

Preperation in the Manifest

In the manifest.json, you need to make sure the website you're theming has the sidenav scripts and styles. Roboto and Material Icons are recommened. For "matches" make sure you have a match pattern matching the website. "run_at" is optional, but we recommend "document_start" and then poll for the elements you need defined to run properly. "/css/example.css" and "/js/example.js" are going to be the scripts you use to style and call functions, these should be at the end of the array.

"content_scripts": [
	{
		"matches": ["*://www.example.com/*"],
		"css" : ["/css/component/sidenav.css", "/css/font/roboto.css", "/css/example.css"],
		"js" : ["/js/component/sidenav.js", "/js/component/material-icons.js", "/js/example.js"],
		"run_at": "document_start"
	}
]

Adding The Side Nav

Syntax:

Function:

materialWeb.sideNav.add(config Object);

Config Object:

{
	"type": string,
	"header": {
		"enable": boolean,
		"text": {
			"enable": boolean,
			"title": string,
			"subtitle": string
		}
	},
	"navigation": {
		"enable": boolean,
		"items": array of navigation item objects or "divider"
	}
}

Navigation Items:

{
	"title": string,
	"icon": string,
	"href": string or false; optional,
	"sub": array of navigation item objects or "divider"
}

Example:

materialWeb.sideNav.add({
	"type": "temporary",
	"header": {
		"enable": true,
		"text": {
			"enable": true,
			"title": "Evelyn Hathaway",
			"subtitle": "evelynhathaway"
		}
	},
	"navigation": {
		"enable": true,
		"items": [
			{
				"title": "Home",
				"icon": "",
				"href": "/"
			},
			"divider",
			{
				"title": "Item With Sub Items",
				"icon": "",
				"href": "/item-with-sub-items",
				"sub": [
					{
						"title": "External Link",
						"href": "https://example.com/"
					},
					"divider",
					{
						"title": "Not a Link"
					}
				]
			},
			{
				"title": "Item",
				"icon": "",
				"href": "/Item"
			}
		]
	}
});

Toggling the Side Nav

Syntax:

Function:

materialWeb.sideNav.toggle(element Node optional);

Example:

materialWeb.sideNav.toggle();

Changing the Background of the Side Nav Header

JavaScript:

Syntax:

Function:

materialWeb.sideNav.background(config Object);

Example:

materialWeb.sideNav.background({
	"gradient": "light|normal|dark",
	"img": "string URI to image"
});

CSS:

Syntax:

Function:

#mw-sideNav-header {
	background-image: textProtection Gradient optional, image;
}

Example:

#mw-sideNav-header {
	background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, .4) 70%), url("http://example.com/image.png");
}