Merge pull request #25 from MHSanaei/dev

pack

1 files changed, 39 insertions, 5 deletions

diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 38a55265..9de00175 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -24,7 +24,7 @@
         <a-icon type="github"></a-icon>
         <span>Github</span>
     </a-menu-item>
-    <a-menu-item key="https://t.me/xxxuiforever">
+    <a-menu-item key="https://t.me/panel3xui">
         <a-icon type="usergroup-add"></a-icon>
         <span>Telegram</span>
     </a-menu-item>
@@ -37,27 +37,51 @@
 
 
 {{define "commonSider"}}
-<a-layout-sider id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu theme="dark" mode="inline" :selected-keys="['{{ .request_uri }}']"
+<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-layout-sider>
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
-          :visible="siderDrawer.visible" :wrap-style="{ padding: 0 }">
+          :visible="siderDrawer.visible"
+          :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu theme="light" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu mode="inline" :selected-keys="['{{ .request_uri }}']"
         @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-drawer>
 <script>
 
+
+    const darkClass = "ant-card-dark";
+    const bgDarkStyle = "background-color: #242c3a";
     const siderDrawer = {
         visible: false,
+		collapsed: false,
+        isDarkTheme: localStorage.getItem("dark-mode") === 'true' ? true : false,
         show() {
             this.visible = true;
         },
@@ -66,6 +90,16 @@
         },
         change() {
             this.visible = !this.visible;
+		 },
+        toggleCollapsed() {
+            this.collapsed = !this.collapsed;
+        },
+        changeTheme() {
+            this.isDarkTheme = ! this.isDarkTheme;
+            localStorage.setItem("dark-mode", this.isDarkTheme);
+        },
+        get theme() {
+            return this.isDarkTheme ? 'dark' : 'light';
         }
     };