Add navigation template

package-lock.json

@@ -1744,8 +1744,7 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -2162,8 +2161,7 @@
                 "safe-buffer": {
                     "version": "5.1.2",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -2219,7 +2217,6 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -2263,14 +2260,12 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "yallist": {
                     "version": "3.1.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 }
             }
         },

src/main/css/common.css

@@ -1,14 +1,13 @@
 :root {
     --fwdekker-theme-color: #0033cc;
+    --fwdekker-theme-color-dark: #00279d;
 }
 
-html {
+html, body {
     height: 100%;
 }
 
-body {
-    position: relative;
-
+#contents {
     padding-top: 5rem;
     padding-bottom: 9rem; /* Vertical footer paddings + 1 */
     min-height: 100%;

src/main/css/nav.css

@@ -0,0 +1,70 @@
+.nav {
+    margin: 0;
+    width: 100%;
+
+    background-color: var(--fwdekker-theme-color);
+    font-size: 120%;
+
+    --padding: calc(2em / 3);
+}
+
+.nav * {
+    z-index: 10;
+}
+
+.nav a {
+    display: inline-block;
+    margin: 0;
+    padding: calc(var(--padding)) calc(var(--padding));
+    width: 100%;
+
+    vertical-align: middle;
+    color: white;
+}
+
+.nav ul {
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+}
+
+.nav li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+
+    position: relative;
+    background-color: var(--fwdekker-theme-color);
+}
+
+.nav li:hover,
+.nav li:focus-within {
+    cursor: pointer;
+    background-color: var(--fwdekker-theme-color-dark);
+}
+
+.nav img.logo {
+    margin-right: calc(1em / 3);
+    height: calc(1em + var(--padding));
+
+    vertical-align: middle;
+    filter: brightness(0) invert(1);
+}
+
+
+.nav ul li ul {
+    display: none;
+    position: absolute;
+    left: 0;
+}
+
+.nav ul li:hover > ul,
+.nav ul li:focus-within > ul,
+.nav ul li ul:hover {
+    display: block;
+}
+
+.nav ul li ul li {
+    width: 100%;
+}

src/main/js/Template.js

@@ -2,6 +2,7 @@ import h from "hyperscript";
 import "normalize.css/normalize.css";
 import "milligram/dist/milligram.css";
 import "../css/common.css";
+import "../css/nav.css";
 
 
 /**
@@ -30,6 +31,43 @@ export const doAfterLoad = function (fun) {
 };
 
 
+/**
+ * Creates a navigation element for navigating through the website.
+ *
+ * @returns {HTMLElement} a navigation element
+ */
+export const nav = function () {
+    return h("nav.nav",
+        h("ul",
+            h("li", h("a", {href: "https://fwdekker.com/"},
+                h("img.logo", {src: "https://fwdekker.com/favicon.png"}),
+                h("b", "FWDekker")
+            )),
+            h("li", h("a", {href: "#", innerHTML: "Tools ▾"}),
+                h("ul",
+                    h("li",
+                        h("a", "Converter", {href: "https://fwdekker.com/tools/converter/"})
+                    ),
+                    h("li",
+                        h("a", "Dice", {href: "https://fwdekker.com/tools/dice/"})
+                    ),
+                    h("li",
+                        h("a", "Doomsday", {href: "https://fwdekker.com/tools/doomsday/"})
+                    ),
+                    h("li",
+                        h("a", "Interlanguage Checker", {href: "https://fwdekker.com/tools/interlanguage-checker/"})
+                    ),
+                    h("li",
+                        h("a", "Random FO76", {href: "https://fwdekker.com/tools/random-fo76/"})
+                    ),
+                )
+            ),
+            h("li", h("a", "Gitea", {href: "https://git.fwdekker.com/"})),
+            h("li", h("a", "Blog", {href: "https://blog.fwdekker.com/"}))
+        )
+    );
+};
+
 /**
  * Creates a header element with the given title and description.
  *