2 files changed, 30 insertions, 2 deletions
diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index 434f730..afc766b 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -234,21 +234,37 @@ function showProject(id) {
 }
 
 /**
+ * Add a CSS class to the current project in projects nav.
+ * @param {String} id - The project id.
+ */
+function setSelectedProject(id) {
+  const links = document.querySelectorAll('.nav__link');
+  links.forEach((link) => {
+    if (link.id === id) {
+      link.classList.add('nav__link--selected');
+    } else {
+      link.classList.remove('nav__link--selected');
+    }
+  });
+}
+
+/**
  * Create a list item for a project.
- * @param {Integer} id - The project id.
+ * @param {String} id - The project id.
  * @param {String} name - The project name.
  * @returns {HTMLElement} The list item.
  */
 function getProjectsNavItem(id, name) {
   const item = document.createElement('li');
   const link = document.createElement('a');
-  link.classList.add('nav__link', 'nav__link--app');
+  link.classList.add('nav__link');
   link.href = `#${id}`;
   link.id = id;
   link.textContent = name;
   link.addEventListener('click', (e) => {
     e.preventDefault();
     showProject(id);
+    setSelectedProject(id);
     toggleProjectDetailsBtn();
     if (isSmallVw()) toggleHeaderFooter();
   });
@@ -290,6 +306,7 @@ function printRequestedPage() {
   if (currentPath) {
     const id = currentPath.replace('#', '');
     showProject(id);
+    setSelectedProject(id);
   }
 }
 
diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss
index 9f80a65..33346b5 100644
--- a/htdocs/src/scss/layout/_nav.scss
+++ b/htdocs/src/scss/layout/_nav.scss
@@ -51,6 +51,17 @@
       color: fun.get-var(color-primary-dark);
       text-decoration: fun.convert-px(1) solid underline;
     }
+
+    &--selected {
+      background: fun.get-var(color-primary-dark);
+      box-shadow: inset 0 0 0 4px fun.get-var(color-bg);
+      color: fun.get-var(color-fg-inverted);
+
+      &:hover,
+      &:focus {
+        background: fun.get-var(color-primary-light);
+      }
+    }
   }
 
   .btn {