add: animation for tab and navbar

2025-09-06 06:37:01 +00:00 · 2024-07-19 17:33:39 +07:00
parent 7660bca27c
commit ec53757c0a
13 changed files with 189 additions and 109 deletions
@@ -201,6 +201,7 @@ androidComponents.onVariants { variant ->
                    set.add(Pair(root.file("webroot/js/modal/errorHistory.js").asFile, null))

                    set.add(Pair(root.file("webroot/css/index.css").asFile, null))
+                    set.add(Pair(root.file("webroot/css/icons.css").asFile, null))
                    set.add(Pair(root.file("webroot/css/fonts.css").asFile, null))

                    set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
@@ -218,6 +219,11 @@ androidComponents.onVariants { variant ->
                    set.add(Pair(root.file("webroot/assets/action.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/home.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/delete.svg").asFile, null))
+
+                    set.add(Pair(root.file("webroot/assets_light/action.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets_light/home.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets_light/settings.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets_light/module.svg").asFile, null))
                    sig.initSign(privKey)
                    set.forEach { it.first.sha(it.second) }
                    val signFile = root.file(name).asFile
@@ -148,6 +148,7 @@ extract "$ZIPFILE" 'webroot/js/switcher/fontChanger.js' "$MODPATH/webroot/js/swi

 extract "$ZIPFILE" 'webroot/css/index.css' "$MODPATH/webroot/css" true
 extract "$ZIPFILE" 'webroot/css/fonts.css' "$MODPATH/webroot/css" true
+extract "$ZIPFILE" 'webroot/css/icons.css' "$MODPATH/webroot/css" true

 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
@@ -156,6 +157,10 @@ for svg in mark tick warn module expand settings close content error action home
  extract "$ZIPFILE" "webroot/assets/${svg}.svg" "$MODPATH/webroot/assets" true
 done

+for svg in module settings action home; do
+  extract "$ZIPFILE" "webroot/assets_light/${svg}.svg" "$MODPATH/webroot/assets_light" true
+done
+
 if [ "$ARCH" = "x86" ] || [ "$ARCH" = "x64" ]; then
  ui_print "- Extracting x86 libraries"
  extract "$ZIPFILE" 'bin/x86/zygiskd' "$MODPATH/bin" true
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+  <path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+  <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+  <path d="M627-520h133v-160H627v160Zm-214 0h133v-160H413v160Zm-213 0h133v-160H200v160Zm0 240h133v-160H200v160Zm213 0h133v-160H413v160Zm214 0h133v-160H627v160Zm-507 0v-400q0-33 23.5-56.5T200-760h560q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H200q-33 0-56.5-23.5T120-280Z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+  <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
+</svg>
@@ -0,0 +1,57 @@
+/* Dark */
+#ni_home {
+  background: url(../assets/home.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_modules {
+  background: url(../assets/module.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_actions {
+  background: url(../assets/action.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_settings {
+  background: url(../assets/settings.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+/* Light */
+#ni_home.light {
+  background: url(../assets_light/home.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_modules.light {
+  background: url(../assets_light/module.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_actions.light {
+  background: url(../assets_light/action.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
+
+#ni_settings.light {
+  background: url(../assets_light/settings.svg);
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+}
@@ -16,16 +16,6 @@
  --font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif;
 }

-.radios input[type=radio] {
-  display: none;
-}
-
-.radio input[type=radio] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 * {
  background-color: var(--background);
  color: var(--font);
@@ -40,6 +30,17 @@ a {
  text-decoration: none !important;
 }

+/* Components */
+.radios input[type=radio] {
+  display: none;
+}
+
+.radio input[type=radio] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .load_screen {
  position: fixed;
  width: 100%;
@@ -73,12 +74,6 @@ a {
  animation: spin 0.8s linear infinite;
 }

-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Components */
 .header {
  display: flex;
  position: fixed;
@@ -92,7 +87,8 @@ a {
 }

 .panel {
-  margin-bottom: 7em;
+  display: none;
+  animation: fade-out 0.2s;
 }

 .navbar {
@@ -122,22 +118,14 @@ a {
 }

 .navicon {
-  background-color: var(--small-card);
+  background: var(--small-card);
  display: flex;
-  width: 65px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50px;
-}
-
-.navicon_disable {
-  display: flex;
-  width: 65px;
+  width: 0;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
+  animation: closeNav 0.15s;
 }

 .card {
@@ -355,3 +343,63 @@ input:checked + .slider:before {
    background-color: var(--button);
  }
 }
+
+/* Show set */
+.panel.show {
+  margin-bottom: 7em;
+  display: block;
+  animation: fade-in 0.2s;
+}
+
+.navicon.show {
+  width: 65px;
+  animation: openNav 0.15s;
+}
+
+/* Animation KeyFrames */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes closeNav {
+  0% {
+    width: 65px;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    width: 0px;
+  }
+}
+
+@keyframes openNav {
+  0% {
+    width: 0px;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    width: 65px;
+  }
+}
@@ -17,6 +17,7 @@
    <script src="js/modal/errorHistory.js" type="module"></script>
    <script src="js/main.js" type="module"></script>

+    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
@@ -67,7 +68,7 @@
    </div>

    <!-- INFO: Home page -->
-    <div id="panel_home" class="panel" style="display: none;">
+    <div id="panel_home" class="panel">
      <div class="header">ReZygisk</div>
      <div style="padding: 40px 0px;"></div>

@@ -104,7 +105,7 @@
      </div>
    </div>

-    <div id="panel_modules" class="panel" style="display: none;">
+    <div id="panel_modules" class="panel">
      <div id="panel_modules_header" class="header">Modules</div>
      <div style="padding: 40px 0px;"></div>
      <div id="modules_list" style="width: 100%; height: fit-content;">
@@ -113,7 +114,7 @@
    </div>

    <!-- INFO: Action page -->
-    <div id="panel_actions" class="panel" style="display: none;">
+    <div id="panel_actions" class="panel">
      <div id="panel_actions_header" class="header">Actions</div>
      <div style="padding: 40px 0px;"></div>
      <!-- INFO: Settings card body (Daemon32) -->
@@ -149,7 +150,7 @@
    </div>

    <!-- INFO: Settings page -->
-    <div id="panel_settings" class="panel" style="display: none;">
+    <div id="panel_settings" class="panel">
      <div id="panel_settings_header" class="header">Settings</div>
      <div style="padding: 40px 0px;"></div>
      <!-- INFO: Enable system font option -->
@@ -218,11 +219,9 @@
        <label class="radio dimc" for="n_home">

          <div class="dimc" style="display: grid; place-items: center;">
-            <div id="nid_home" class="dimc navicon_disable">
-              <img class="dimc" style="width: 24px; height: 24px" src="assets/home.svg">
-            </div>
-            <div id="ni_home" class="navicon" style="display: none;">
-              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/home.svg">
+            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div style="grid-area: 1 / 1;" id="ni_home"></div>
+              <div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
            </div>
            <div id="nav_home_title" class="navtitle dimc">Home</div>
          </div>
@@ -235,11 +234,9 @@
        <label class="radio dimc" for="n_modules">

          <div class="dimc" style="display: grid; place-items: center;">
-            <div id="nid_modules" class="dimc navicon_disable">
-              <img class="dimc" style="width: 24px; height: 24px" src="assets/module.svg">
-            </div>
-            <div id="ni_modules" class="navicon" style="display: none;">
-              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/module.svg">
+            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div style="grid-area: 1 / 1;" id="ni_modules"></div>
+              <div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
            </div>
            <div id="nav_modules_title" class="navtitle dimc">Modules</div>
          </div>
@@ -252,11 +249,9 @@
        <label class="radio dimc" for="n_actions">

          <div class="dimc" style="display: grid; place-items: center;">
-            <div id="nid_actions" class="dimc navicon_disable">
-              <img class="dimc" style="width: 24px; height: 24px" src="assets/action.svg">
-            </div>
-            <div id="ni_actions" class="navicon" style="display: none;">
-              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/action.svg">
+            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div style="grid-area: 1 / 1;" id="ni_actions"></div>
+              <div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
            </div>
            <div id="nav_actions_title" class="navtitle dimc">Actions</div>
          </div>
@@ -269,11 +264,9 @@
        <label class="radio dimc" for="n_settings">

          <div class="dimc" style="display: grid; place-items: center;">
-            <div id="nid_settings" class="dimc navicon_disable">
-              <img class="dimc" style="width: 24px; height: 24px" src="assets/settings.svg">
-            </div>
-            <div id="ni_settings" class="navicon" style="display: none;">
-              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/settings.svg">
+            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div style="grid-area: 1 / 1;" id="ni_settings"></div>
+              <div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
            </div>
            <div id="nav_settings_title" class="navtitle dimc">Settings</div>
          </div>
@@ -1,8 +1,7 @@
 setData('home')

-document.getElementById('ni_home').style.display = 'flex'
-document.getElementById('nid_home').style.display = 'none'
-document.getElementById('panel_home').style.display = 'block'
+document.getElementById('panel_home').classList.toggle('show')
+document.getElementById(`nibg_home`).classList.toggle('show')

 document.querySelectorAll('[name=navbutton]').forEach((element) => {
  element.addEventListener('click', (event) => {
@@ -12,23 +11,19 @@ document.querySelectorAll('[name=navbutton]').forEach((element) => {

    /* INFO: Disable icon on old state */
    const pre_input = document.getElementById(`n_${previous}`)
-    const pre_icon = document.getElementById(`ni_${previous}`)
-    const pre_icon_disabled = document.getElementById(`nid_${previous}`)
+    const pre_background = document.getElementById(`nibg_${previous}`)

-    document.getElementById(`panel_${previous}`).style.display = 'none'
+    document.getElementById(`panel_${previous}`).classList.remove('show')
    pre_input.removeAttribute('checked')
-    pre_icon.style.display = 'none'
-    pre_icon_disabled.style.display = 'flex'
+    pre_background.classList.remove('show')

    /* INFO: Enable icon on new state */
    const curr_input = document.getElementById(`n_${value}`)
-    const icon = document.getElementById(`ni_${value}`)
-    const icon_disabled = document.getElementById(`nid_${value}`)
+    const i_background = document.getElementById(`nibg_${value}`)

-    document.getElementById(`panel_${value}`).style.display = 'block'
+    document.getElementById(`panel_${value}`).classList.toggle('show')
    curr_input.setAttribute('checked', '')
-    icon.style.display = 'flex'
-    icon_disabled.style.display = 'none'
+    i_background.classList.toggle('show')

    setData(value)
  })
@@ -1,13 +1,6 @@
 export function setDarkNav() {
-  document.getElementById('nid_home').innerHTML = '<img class="dimc" style="width: 24px; height: 24px" src="assets/home.svg">'
-  document.getElementById('ni_home').innerHTML = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/home.svg">'
-
-  document.getElementById('nid_modules').innerHTML = '<img class="dimc" style="width: 24px; height: 24px" src="assets/module.svg">'
-  document.getElementById('ni_modules').innerHTML = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/module.svg">'
-
-  document.getElementById('nid_actions').innerHTML = '<img class="dimc" style="width: 24px; height: 24px" src="assets/action.svg">'
-  document.getElementById('ni_actions').innerHTML = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/action.svg">'
-
-  document.getElementById('nid_settings').innerHTML = '<img class="dimc" style="width: 24px; height: 24px" src="assets/settings.svg">'
-  document.getElementById('ni_settings').innerHTML = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/settings.svg">'
+  document.getElementById('ni_home').classList.remove('light')
+  document.getElementById('ni_modules').classList.remove('light')
+  document.getElementById('ni_actions').classList.remove('light')
+  document.getElementById('ni_settings').classList.remove('light')
 }
@@ -22,24 +22,4 @@ export const light_clear_icon = `
  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#2c2c2c">
    <path d="M267.33-120q-27.5 0-47.08-19.58-19.58-19.59-19.58-47.09V-740H160v-66.67h192V-840h256v33.33h192V-740h-40.67v553.33q0 27-19.83 46.84Q719.67-120 692.67-120H267.33Zm425.34-620H267.33v553.33h425.34V-740Zm-328 469.33h66.66v-386h-66.66v386Zm164 0h66.66v-386h-66.66v386ZM267.33-740v553.33V-740Z"/>
  </svg>
-`
-export const light_module_icon = (inside) => `
-  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M627-520h133v-160H627v160Zm-214 0h133v-160H413v160Zm-213 0h133v-160H200v160Zm0 240h133v-160H200v160Zm213 0h133v-160H413v160Zm214 0h133v-160H627v160Zm-507 0v-400q0-33 23.5-56.5T200-760h560q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H200q-33 0-56.5-23.5T120-280Z"/>
-  </svg>
-`
-export const light_settings_icon = (inside) => `
-  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
-  </svg>
-`
-export const light_action_icon = (inside) =>  `
-  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/>
-  </svg>
-`
-export const light_home_icon = (inside) => `
-  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
-  </svg>
 `
@@ -1,15 +1,6 @@
-import { light_action_icon, light_home_icon, light_module_icon, light_settings_icon } from './lightIcon.js'
-
 export function setLightNav() {
-  document.getElementById('nid_home').innerHTML = light_home_icon()
-  document.getElementById('ni_home').innerHTML = light_home_icon(true)
-
-  document.getElementById('nid_modules').innerHTML = light_module_icon()
-  document.getElementById('ni_modules').innerHTML = light_module_icon(true)
-
-  document.getElementById('nid_actions').innerHTML = light_action_icon()
-  document.getElementById('ni_actions').innerHTML = light_action_icon(true)
-
-  document.getElementById('nid_settings').innerHTML = light_settings_icon()
-  document.getElementById('ni_settings').innerHTML = light_settings_icon(true)
+  document.getElementById('ni_home').classList.toggle('light')
+  document.getElementById('ni_modules').classList.toggle('light')
+  document.getElementById('ni_actions').classList.toggle('light')
+  document.getElementById('ni_settings').classList.toggle('light')
 }