From 6275618ceee113d29135f984416ee131679d6afc Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Sun, 3 May 2020 18:02:48 +0200
Subject: [PATCH] Add navigation template

---
 package-lock.json       | Bin 232904 -> 232714 bytes
 src/main/css/common.css |   7 ++--
 src/main/css/nav.css    |  70 ++++++++++++++++++++++++++++++++++++++++
 src/main/js/Template.js |  38 ++++++++++++++++++++++
 4 files changed, 111 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdf3d3f7604c3594c8bdbaa6a4ba504b663b9f6e..e028b3b5ee4f3deafe85a0ee9b2e6cda1a344b35 100644
GIT binary patch
delta 104
zcmX>xo3CpYU&9v0a-GQr`-CPR@DrYVU@7PJ(>jc879f%7A67AnZ(oqgXvsb~VUPOs
zzuJsE(~n3nicY>ztvB7Co0)BUbuMESD@^xvhhoMGAjh;_xP%dinYIg;FmIIv0Er4G
AH~;_u

delta 129
zcmeC0#dl&hU&9v0a-HcHj2XQrA6UvcxzdPla)Gzl^t%a6LempW7@N1p=`x-*2P@bf
zkjiMwKE1${(Pw%OFEju2V-k$QlP^^3O?Ozt#Il_|m$8NwtZ@2)d`7P6dzzW~rXMI`
aOaO^lOb^gzQf?0|W&~oU?V-iYTO|Pt2QAkC

diff --git a/src/main/css/common.css b/src/main/css/common.css
index 35e10e7..f2a11bc 100644
--- a/src/main/css/common.css
+++ b/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%;
diff --git a/src/main/css/nav.css b/src/main/css/nav.css
index e69de29..99fcc1a 100644
--- a/src/main/css/nav.css
+++ b/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%;
+}
diff --git a/src/main/js/Template.js b/src/main/js/Template.js
index 7d2c436..494d639 100644
--- a/src/main/js/Template.js
+++ b/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 &#9662;"}),
+                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.
  *