From 9a3227b43f4569e3d0a8aa1ef3a95cbbd3b474ab Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Wed, 28 Apr 2021 12:26:01 +0200
Subject: [PATCH] Ensure whole nav row is clickable

This is a regression because I accidentally removed the `width: 100%` when adding the hamburger menu.

Fixes #18.
---
 package.json                  | 2 +-
 src/main/css/snippets/nav.css | 4 ++++
 src/main/js/main.js           | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9b5a82d..e24e315 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.2.4",
+    "version": "2.2.5",
     "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 bd63f77..286e7f9 100644
--- a/src/main/css/snippets/nav.css
+++ b/src/main/css/snippets/nav.css
@@ -15,6 +15,10 @@ nav * {
     vertical-align: middle;
 }
 
+nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
+    width: 100%;  /* Ensures whole li is clickable */
+}
+
 nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label {
     display: inline-block;
     margin: 0;
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 7eb8ac3..b128012 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -94,7 +94,8 @@ const unpackEntry = function(entry, path = "/", highlightPath = "") {
     const formattedName = (isExternalLink ? "&#9099; " : "") + entry.name;
 
     if (entry.entries.length === 0)
-        return `<li class="${shouldHighlight ? "currentPage" : ""}"><a href="${entry.link}">${formattedName}</a></li>`;
+        return "" +
+            `<li ${shouldHighlight ? "class=\"currentPage\"" : ""}><a href="${entry.link}">${formattedName}</a></li>`;
 
     const depth = path.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
     const arrow = depth === 0 ? "&#9662;" : "&#9656;";