chore: print the projects list

1 files changed, 32 insertions, 0 deletions

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index 1b7bbc6..959bc56 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -1,6 +1,37 @@
+import projects from './config/projects';
 import { isStyleJsExists } from './utilities/helpers';
 
 /**
+ * Create a list item for a project.
+ * @param {Integer} 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.href = id;
+  link.id = id;
+  link.textContent = name;
+  item.classList.add('nav__item');
+  item.appendChild(link);
+  return item;
+}
+
+/**
+ * Print the list of available projects.
+ */
+function printProjectsNav() {
+  const ul = document.querySelector('.nav .nav__list');
+
+  projects.forEach((project) => {
+    const item = getProjectsNavItem(project.id, project.name);
+    ul.appendChild(item);
+  });
+}
+
+/**
  * Add style.js script for development purposes.
  */
 function loadWebpackStyles() {
@@ -17,6 +48,7 @@ function loadWebpackStyles() {
  */
 function init() {
   loadWebpackStyles();
+  printProjectsNav();
 }
 
 init();