Add border above some nav elements
Borders were added in api-nav v0.1.0. Also simplify some CSS selectors, since they contained a lot of redundancy which made them harder to read.
This commit is contained in:
parent
df1198b361
commit
4d0f1dc5b4
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.3.2",
|
"version": "3.3.3",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -28,7 +28,7 @@ nav.fwd-nav li > :first-child {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav ul li ul {
|
nav.fwd-nav ul ul {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -38,13 +38,13 @@ nav.fwd-nav ul li ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav ul li:where(:active, :focus-within, :hover) > ul {
|
nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav ul li ul li ul {
|
nav.fwd-nav ul ul ul {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
@ -58,17 +58,21 @@ nav.fwd-nav > ul > li > ul {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Colors */
|
/* Colors and optional styling */
|
||||||
nav.fwd-nav,
|
nav.fwd-nav,
|
||||||
nav.fwd-nav ul {
|
nav.fwd-nav ul {
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav ul li:where(:active, :focus-within, :hover) {
|
nav.fwd-nav li.border-above {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.fwd-nav li:where(:active, :focus-within, :hover) {
|
||||||
background-color: var(--primary-focus-dark);
|
background-color: var(--primary-focus-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav ul li.current-page:not(:where(:active, :focus-within, :hover)) {
|
nav.fwd-nav li.current-page:not(:where(:active, :focus-within, :hover)) {
|
||||||
background-color: var(--primary-focus-opaque);
|
background-color: var(--primary-focus-opaque);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -112,21 +112,27 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
|
||||||
* @returns the navigation list entry as HTML, described by its children
|
* @returns the navigation list entry as HTML, described by its children
|
||||||
*/
|
*/
|
||||||
function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
|
function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
|
||||||
const shouldHighlight = highlightPath?.startsWith(`${path + entry.name}/`) ?? false;
|
const classList = [];
|
||||||
const isExternalLink = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#";
|
if (highlightPath?.startsWith(`${path + entry.name}/`) ?? false) classList.push("current-page");
|
||||||
|
if (entry.border) classList.push("border-above");
|
||||||
|
const classString = classList.length !== 0 ? `class="${classList.join(" ")}"` : "";
|
||||||
|
|
||||||
|
const externalLinkString = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#"
|
||||||
|
? `target="_blank"`
|
||||||
|
: "";
|
||||||
|
|
||||||
if (entry.entries.length === 0)
|
if (entry.entries.length === 0)
|
||||||
return "" +
|
return "" +
|
||||||
`<li ${shouldHighlight ? "class=\"current-page\"" : ""}>` +
|
`<li ${classString}>` +
|
||||||
`<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
|
`<a href="${entry.link}" ${externalLinkString}>${entry.name}</a>` +
|
||||||
`</li>`;
|
`</li>`;
|
||||||
|
|
||||||
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
|
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
|
||||||
const arrow = depth === 0 ? "▾" : "▸";
|
const arrow = depth === 0 ? "▾" : "▸";
|
||||||
|
|
||||||
return "" +
|
return "" +
|
||||||
`<li class="${shouldHighlight ? "current-page" : ""}">` +
|
`<li ${classString}>` +
|
||||||
`<a href="${entry.link}">${entry.name} ${arrow}</a>` +
|
`<a href="${entry.link}" ${externalLinkString}>${entry.name} ${arrow}</a>` +
|
||||||
`<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
|
`<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
|
||||||
`</li>`;
|
`</li>`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue