added content handling

src/main.js

@@ -123,69 +123,87 @@ function init() {
 }
 
 // update navigation
-function updateNavigation(object) {
-  // update navigation
-  const listEl = document.createElement("ul");
-
-  // add navigation items
-  for (let key in object.submenu) {
-    let itemEl = buildNavigationItemEl(object.submenu[key]);
-    itemEl.classList.add("forward-btn");
-    listEl.appendChild(itemEl);
+function buildPageContents(object) {
+  // handle message content
+  if (object.hasOwnProperty("message")) {
+    // create content element
+    const appEl = document.getElementById("app");
+    const contentEl = document.createElement("div");
+    contentEl.id = "content";
+    contentEl.innerHTML = object.message;
+    appEl.prepend(contentEl);
+  } else {
+    // remove content element
+    const contentEl = document.getElementById("content");
+    if (contentEl) contentEl.remove();
   }
 
-  // add "special back" button
-  if (object.path !== "/") {
-    // determine depth of object
-    const segments = object.path.split("/");
-    const depth = segments.length - 1;
-    let backItemEl;
-    if (depth === 1)
-      backItemEl = buildNavigationItemEl({
-        label: "Close",
-        path: "/",
-        command: "close",
-      });
-    else if (depth === 2)
-      backItemEl = buildNavigationItemEl({
-        label: "Back",
-        path: "/menu",
-        command: "back",
-      });
-    else if (depth === 3)
-      backItemEl = buildNavigationItemEl({
-        label: "Exit",
-        path: "/",
-        command: "exit",
-      });
-
-    backItemEl.classList.add("back-btn");
-    listEl.appendChild(backItemEl);
-  }
+  updateNavigation();
 
-  const navigationEl = document.getElementById("navigation");
-  navigationEl.replaceChildren(listEl);
-
-  focusNavigationItem(1);
-
-  // build navigation item
-  function buildNavigationItemEl(item) {
-    const itemEl = document.createElement("li");
-    itemEl.className = "link";
-    const linkEl = document.createElement("a");
-    linkEl.href = item.path;
-    linkEl.innerHTML = item.label;
-    linkEl.dataset.command = item.command;
-    itemEl.appendChild(linkEl);
-
-    if (item.label.toLowerCase() !== item.command.toLowerCase()) {
-      const commandEl = document.createElement("div");
-      commandEl.className = "command";
-      commandEl.innerHTML = item.command;
-      itemEl.appendChild(commandEl);
+  // update navigation
+  function updateNavigation() {
+    const listEl = document.createElement("ul");
+
+    // add navigation items
+    for (let key in object.submenu) {
+      let itemEl = buildNavigationItemEl(object.submenu[key]);
+      itemEl.classList.add("forward-btn");
+      listEl.appendChild(itemEl);
     }
 
-    return itemEl;
+    // add "special back" button
+    if (object.path !== "/") {
+      // determine depth of object
+      const segments = object.path.split("/");
+      const depth = segments.length - 1;
+      let backItemEl;
+      if (depth === 1)
+        backItemEl = buildNavigationItemEl({
+          label: "Close",
+          path: "/",
+          command: "close",
+        });
+      else if (depth === 2)
+        backItemEl = buildNavigationItemEl({
+          label: "Back",
+          path: "/menu",
+          command: "back",
+        });
+      else if (depth === 3)
+        backItemEl = buildNavigationItemEl({
+          label: "Exit",
+          path: "/",
+          command: "exit",
+        });
+
+      backItemEl.classList.add("back-btn");
+      listEl.appendChild(backItemEl);
+    }
+
+    const navigationEl = document.getElementById("navigation");
+    navigationEl.replaceChildren(listEl);
+
+    focusNavigationItem(1);
+
+    // build navigation item
+    function buildNavigationItemEl(item) {
+      const itemEl = document.createElement("li");
+      itemEl.className = "link";
+      const linkEl = document.createElement("a");
+      linkEl.href = item.path;
+      linkEl.innerHTML = item.label;
+      linkEl.dataset.command = item.command;
+      itemEl.appendChild(linkEl);
+
+      if (item.label.toLowerCase() !== item.command.toLowerCase()) {
+        const commandEl = document.createElement("div");
+        commandEl.className = "command";
+        commandEl.innerHTML = item.command;
+        itemEl.appendChild(commandEl);
+      }
+
+      return itemEl;
+    }
   }
 }
 
@@ -197,7 +215,7 @@ function navigateToPath(path, pushState = true) {
   // find object with path
   let navObj = helpers.findNestedObject(navigation, "path", path);
   if (!navObj) navObj = navigation.home; // fallback to home
-  updateNavigation(navObj);
+  buildPageContents(navObj);
 
   // State Object
   var stateObj = {