From 9f24f7421860a0ca14aa63f551797979e8dc1bf9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Oct 2021 17:18:38 +0200
Subject: chore: add a different style to the selected project inside nav

---
 htdocs/src/js/app.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

(limited to 'htdocs/src/js')

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
@@ -233,22 +233,38 @@ function showProject(id) {
   main.replaceChildren(preview, details);
 }
 
+/**
+ * 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);
   }
 }
 
-- 
cgit v1.2.3