ref: navigation buttons

html/navigation.html

@@ -46,16 +46,19 @@
       li.dynamic {
         flex: 1 1 0%;
       }
+      li.hidden {
+        display: none;
+      }
+      li.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
       button {
         width: 32px;
         height: 32px;
         border: none;
         background-color: transparent;
       }
-      button.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
       input {
         width: 100%;
         min-width: 0;
@@ -144,7 +147,10 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-disabled", (e, button) => {
-          document.getElementById(button.id).classList.toggle("disabled", button.disabled);
+          document.getElementById(button.id).parentNode.classList.toggle("disabled", button.disabled);
+        });
+        ipcRenderer.on("button-hidden", (e, button) => {
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("input-blur", (e, input) => {
           document.getElementById(input.id).blur();

html/widget.html

@@ -46,6 +46,14 @@
         border-bottom: 1px solid var(--border-color);
         background: var(--background-color);
       }
+      li {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+      }
+      li.hidden {
+        display: none;
+      }
       button {
         width: 32px;
         height: 32px;
@@ -114,7 +122,7 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-hidden", (e, button) => {
-          document.getElementById(button.id).parentNode.hidden = button.hidden;
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("data-theme", (e, data) => {
           document.documentElement.setAttribute("data-theme", data.theme);