added disabled buttons to navBar

data/navBar.json

@@ -18,11 +18,13 @@
     "icon": "powerplates_8x8.png",
     "action": "navigate",
     "actionValue": "/powerplates",
+    "disabled": true,
     "alt": {
       "name": "byte",
       "icon": "dice3_8x8.png",
       "action": "navigate",
-      "actionValue": "/"
+      "actionValue": "/",
+      "disabled": false
     }
   },
   {

global/navBar.css

@@ -22,13 +22,26 @@ li {
   filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
 }
 button:hover {
-  filter: brightness(1.35)  drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+  filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
   cursor: pointer;
 }
 button:active {
   filter: brightness(0.75);
   transform: translateY(calc(1px * var(--pxDensity)));
 }
+.button:disabled, button[disabled] {
+  filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+  cursor: not-allowed;
+}
+.button:disabled:hover, button[disabled]:hover {
+  filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+  cursor: not-allowed;
+}
+.button:disabled:active, button[disabled]:active {
+  filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+  cursor: not-allowed;
+  transform: none;
+}
 .navBtnImg {
   width: calc(12px * var(--pxDensity));
   height: calc(12px * var(--pxDensity));

global/navBar.js

@@ -21,7 +21,8 @@ function onLoadNavBar() {
       btn["action"]      || "",
       btn["actionValue"] || "",
       btn["iconId"]      || "",
-      btn["alt"]         || ""
+      btn["alt"]         || "",
+      btn["disabled"]    || false
     ))
   }
 
@@ -29,12 +30,13 @@ function onLoadNavBar() {
   container.appendChild(navBarAligner)
 }
 
-function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", hidden = "") {
+function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false) {
   if (alts.includes(alt["name"])) {
     icon        = alt["icon"]        || ""
     action      = alt["action"]      || ""
     actionValue = alt["actionValue"] || ""
     iconId      = alt["iconId"]      || ""
+    disabled    = alt["disabled"]    || false
   }
 
   let onClick
@@ -47,7 +49,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "",
   let btn = document.createElement("li")
 
   btn.innerHTML = `
-    <button onclick="${onClick}" class="navBtn">
+    <button onclick="${onClick}" class="navBtn" ${disabled == true ? "disabled" : ""}>
       <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
       <img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
     </button>