checkbox fixed

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

web/html/xui/common_sider.html

@@ -15,10 +15,6 @@
     <a-icon type="tool"></a-icon>
     <span><b>{{ i18n "menu.xray"}}</b></span>
 </a-menu-item>
-<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
-<!--    <a-icon type="laptop"></a-icon>-->
-<!--    <span>Client</span>-->
-<!--</a-menu-item>-->
 <a-menu-item key="{{ .base_path }}logout">
     <a-icon type="logout"></a-icon>
     <span><b>{{ i18n "menu.logout"}}</b></span>
@@ -28,14 +24,7 @@
 
 {{define "commonSider"}}
 <a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+    <theme-switch></theme-switch>
-        <a-menu-item mode="inline">
-            <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-            <theme-switch>
-            </theme-switch>
-                <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem;" id="ultradarktheme">Ultra</a-checkbox>
-        </a-menu-item>
-    </a-menu>
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}

web/html/xui/component/themeSwitch.html

@@ -1,70 +1,65 @@
 {{define "component/themeSwitchTemplate"}}
 <template>
-  <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
-            @change="themeSwitcher.toggleTheme()">
+    <a-menu-item mode="inline">
-  </a-switch>
+      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()">
+      </a-switch>
+      <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+        :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">
+        Ultra
+      </a-checkbox>
+    </a-menu-item>
+  </a-menu>
 </template>
 {{end}}
 
 {{define "component/themeSwitcher"}}
 <script>
-  function createThemeSwitcher() {
+function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
-    const theme = isDarkTheme ? 'dark' : 'light';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
-    document.querySelector('body').setAttribute('class', theme)
+    if (isUltra) {
-    return {
+        document.documentElement.setAttribute('data-theme', 'ultra-dark');
-      isDarkTheme,
+    }
-      get currentTheme() {
-        return this.isDarkTheme ? 'dark' : 'light';
-      },
-      toggleTheme() {
-        this.isDarkTheme = !this.isDarkTheme;
-        localStorage.setItem('dark-mode', this.isDarkTheme);
-        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
-        document.getElementById('message').className = themeSwitcher.currentTheme;
-      },
-    };
-  }
 
-  const themeSwitcher = createThemeSwitcher();
+    const theme = isDarkTheme ? 'dark' : 'light';
+    document.querySelector('body').setAttribute('class', theme);
+    
+    return {
+        isDarkTheme,
+        isUltra,
+        get currentTheme() {
+            return this.isDarkTheme ? 'dark' : 'light';
+        },
+        toggleTheme() {
+            this.isDarkTheme = !this.isDarkTheme;
+            localStorage.setItem('dark-mode', this.isDarkTheme);
+            document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
+            document.getElementById('message').className = themeSwitcher.currentTheme;
+        },
+        toggleUltra() {
+            this.isUltra = !this.isUltra;
+            if (this.isUltra) {
+                document.documentElement.setAttribute('data-theme', 'ultra-dark');
+            } else {
+                document.documentElement.removeAttribute('data-theme');
+            }
+            localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
+        }
+    };
+}
+
+const themeSwitcher = createThemeSwitcher();
 
   Vue.component('theme-switch', {
     props: [],
     template: `{{template "component/themeSwitchTemplate"}}`,
     data: () => ({ themeSwitcher }),
     mounted() {
-      this.$message.config({getContainer: () => document.getElementById('message')});
+      this.$message.config({ getContainer: () => document.getElementById('message') });
       document.getElementById('message').className = themeSwitcher.currentTheme;
     }
   });
 </script>
-{{end}}
+{{end}}
-
-{{define "component/ultraDarkTheme"}}
-<script>
-  const isUltraDarkThemeEnabled = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
-
-  document.addEventListener('DOMContentLoaded', function () {
-    const uthemeToggle = document.getElementById('ultradarktheme');
-
-    if (uthemeToggle) {
-      uthemeToggle.checked = isUltraDarkThemeEnabled;
-
-      function ultraToggleTheme() {
-        if (uthemeToggle.checked) {
-          document.documentElement.setAttribute('data-theme', 'ultra-dark');
-          localStorage.setItem('isUltraDarkThemeEnabled', 'true');
-        } else {
-          document.documentElement.removeAttribute('data-theme');
-          localStorage.setItem('isUltraDarkThemeEnabled', 'false');
-        }
-      }
-
-      uthemeToggle.addEventListener('change', ultraToggleTheme);
-      ultraToggleTheme();
-    } else {
-      console.error("Element with ID 'ultradarktheme' not found.");
-    }
-  });
-</script>
-{{end}}

web/html/xui/index.html

@@ -343,7 +343,6 @@
 {{template "js" .}}
 <script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
 {{template "component/themeSwitcher" .}}
-{{template "component/ultraDarkTheme" .}}
 {{template "textModal"}}
 <script>