fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

Allow arbitrary nesting of nav entries 

Fixes #1.
This commit is contained in:
Florine W. Dekker 2020-05-17 21:06:26 +02:00
parent c25ad1619d
commit 1c29d7d3ac
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
package-lock.json generated
View File

Binary file not shown.

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@fwdekker/template", "name": "@fwdekker/template",
"version": "0.0.15", "version": "0.0.16",
"description": "The base template for pages on fwdekker.com.", "description": "The base template for pages on fwdekker.com.",
"author": "Felix W. Dekker (https://fwdekker.com)", "author": "Felix W. Dekker (https://fwdekker.com)",
"license": "MIT", "license": "MIT",

8
src/main/css/nav.css
View File

@ -58,11 +58,16 @@
.nav ul li ul { .nav ul li ul {
display: none; /*display: none;*/
position: absolute; position: absolute;
left: 0; left: 0;
} }
.nav ul li ul li ul {
left: 100%;
top: 0;
}
.nav ul li:hover > ul, .nav ul li:hover > ul,
.nav ul li:focus-within > ul, .nav ul li:focus-within > ul,
.nav ul li ul:hover { .nav ul li ul:hover {
@ -70,5 +75,6 @@
} }
.nav ul li ul li { .nav ul li ul li {
min-width: 7em;
width: 100%; width: 100%;
} }

9
src/main/js/Template.js
View File

@ -61,15 +61,18 @@ export const nav = function () {
* Unpacks a navigation entry returned from the navigation API into an HTML element. * Unpacks a navigation entry returned from the navigation API into an HTML element.
* *
* @param entry {Object} the entry to unpack * @param entry {Object} the entry to unpack
* @param [depth] {Object} the current nesting level
* @returns {HTMLElement} the navigation list entry as HTML, described by its children * @returns {HTMLElement} the navigation list entry as HTML, described by its children
*/ */
const unpackEntry = function (entry) { const unpackEntry = function (entry, depth = 0) {
if (entry.entries.length === 0) if (entry.entries.length === 0)
return h("li", h("a", {href: entry.link, innerHTML: entry.name})); return h("li", h("a", {href: entry.link, innerHTML: entry.name}));
const arrow = depth === 0 ? "▾" : "▸"
return h("li", return h("li",
h("a", {href: entry.link, innerHTML: `${entry.name} ▾`}), h("a", {href: entry.link, innerHTML: `${entry.name} ${arrow}`}),
h("ul", entry.entries.map(it => unpackEntry(it))) h("ul", entry.entries.map(it => unpackEntry(it, depth + 1)))
); );
}; };