Browse Source

Allow arbitrary nesting of nav entries

Fixes #1.
master v0.0.16
F.W. Dekker 1 year ago
parent
commit
1c29d7d3ac
Signed by: FWDekker GPG Key ID: B1B567AF58D6EE0F
  1. 46
      package-lock.json
  2. 2
      package.json
  3. 8
      src/main/css/nav.css
  4. 9
      src/main/js/Template.js

46
package-lock.json

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "0.0.15",
"version": "0.0.16",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -2296,7 +2296,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -2317,12 +2318,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -2337,17 +2340,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -2464,7 +2470,8 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -2476,6 +2483,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -2490,6 +2498,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -2497,12 +2506,14 @@
"minimist": {
"version": "1.2.5",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -2521,6 +2532,7 @@
"version": "0.5.3",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "^1.2.5"
}
@ -2582,7 +2594,8 @@
"npm-normalize-package-bin": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"npm-packlist": {
"version": "1.4.8",
@ -2610,7 +2623,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -2622,6 +2636,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -2699,7 +2714,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -2735,6 +2751,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -2754,6 +2771,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -2797,12 +2815,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

2
package.json

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

8
src/main/css/nav.css

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

9
src/main/js/Template.js

@ -61,15 +61,18 @@ export const nav = function () {
* Unpacks a navigation entry returned from the navigation API into an HTML element.
*
* @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
*/
const unpackEntry = function (entry) {
const unpackEntry = function (entry, depth = 0) {
if (entry.entries.length === 0)
return h("li", h("a", {href: entry.link, innerHTML: entry.name}));
const arrow = depth === 0 ? "▾" : "▸"
return h("li",
h("a", {href: entry.link, innerHTML: `${entry.name} ▾`}),
h("ul", entry.entries.map(it => unpackEntry(it)))
h("a", {href: entry.link, innerHTML: `${entry.name} ${arrow}`}),
h("ul", entry.entries.map(it => unpackEntry(it, depth + 1)))
);
};

Loading…
Cancel
Save