diff options
Diffstat (limited to 'web/html/xui/common_sider.html')
| -rw-r--r-- | web/html/xui/common_sider.html | 44 |
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'; } }; |