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,8 +1,16 @@
 {{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-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}}
 
@@ -10,19 +18,35 @@
 <script>
 function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
+    if (isUltra) {
+        document.documentElement.setAttribute('data-theme', 'ultra-dark');
+    }
+
     const theme = isDarkTheme ? 'dark' : 'light';
-    document.querySelector('body').setAttribute('class', theme)
+    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.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());
+        }
     };
 }
 
@@ -39,32 +63,3 @@
   });
 </script>
 {{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>