diff --git a/package.json b/package.json
index fd126ed..5cdf27b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "The base template for pages on fwdekker.com.",
"author": "Felix W. Dekker",
"license": "MIT",
diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css
index 32c445a..278cf64 100644
--- a/src/main/css/snippets/nav.css
+++ b/src/main/css/snippets/nav.css
@@ -1,3 +1,4 @@
+/* Base elements */
nav {
margin: 0;
width: 100%;
@@ -13,16 +14,23 @@ nav * {
vertical-align: middle;
}
-nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
+nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label {
display: inline-block;
margin: 0;
padding: calc(var(--padding)) calc(var(--padding));
- width: 100%;
+ height: 100%;
color: white;
}
+nav #nav-hamburger-label {
+ float: right;
+ font-size: unset;
+ cursor: pointer;
+}
+
+/* Logo */
nav .logo {
width: calc(1em + var(--padding));
height: calc(1em + var(--padding));
@@ -30,12 +38,14 @@ nav .logo {
vertical-align: middle;
filter: brightness(0) invert(1);
}
+
nav div.logo {
display: inline-block;
margin-right: calc(1em / 3);
}
+/* First level nesting */
nav ul {
margin: 0;
padding: 0;
@@ -53,7 +63,9 @@ nav ul li {
}
nav ul li:hover,
-nav ul li:focus-within {
+nav ul li:focus-within,
+nav #nav-hamburger-label:hover,
+nav #nav-hamburger-label:focus-within {
cursor: pointer;
background-color: var(--fwdekker-theme-color-very-dark);
}
@@ -63,6 +75,7 @@ nav li.currentPage {
}
+/* Second level nesting */
nav ul li ul {
display: none;
position: absolute;
@@ -85,3 +98,21 @@ nav ul li ul li {
width: 100%;
white-space: nowrap;
}
+
+
+/* Hide hamburger-related elements */
+nav input[type="checkbox"] {
+ display: none;
+}
+
+@media (min-width: 600px) {
+ nav #nav-hamburger-label {
+ display: none;
+ }
+}
+
+@media (max-width: 600px) {
+ nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
+ display: none;
+ }
+}
diff --git a/src/main/js/main.js b/src/main/js/main.js
index fb50da8..33a9ee1 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -68,7 +68,13 @@ const nav = function(highlightPath = "") {
return [];
});
- const nav = stringToHtml(``, "nav");
+ const nav = stringToHtml(
+ ``,
+ "nav"
+ );
nav.appendChild(base);
return nav;
};