mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-10-27 02:24:40 +00:00
92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
{{define "menuItems"}}
|
|
<a-menu-item key="{{ .base_path }}xui/">
|
|
<a-icon type="dashboard"></a-icon>
|
|
<span>{{ i18n "menu.dashboard"}}</span>
|
|
</a-menu-item>
|
|
<a-menu-item key="{{ .base_path }}xui/inbounds">
|
|
<a-icon type="user"></a-icon>
|
|
<span>{{ i18n "menu.inbounds"}}</span>
|
|
</a-menu-item>
|
|
<a-menu-item key="{{ .base_path }}xui/settings">
|
|
<a-icon type="setting"></a-icon>
|
|
<span>{{ i18n "menu.settings"}}</span>
|
|
</a-menu-item>
|
|
<!--<a-menu-item key="{{ .base_path }}xui/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>{{ i18n "menu.logout"}}</span>
|
|
</a-menu-item>
|
|
{{end}}
|
|
|
|
|
|
{{define "commonSider"}}
|
|
<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-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''"
|
|
: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="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-drawer>
|
|
<script>
|
|
const darkClass = "ant-card-dark";
|
|
const bgDarkStyle = "background-color: #242c3a";
|
|
const siderDrawer = {
|
|
visible: false,
|
|
collapsed: false,
|
|
isDarkTheme: localStorage.getItem("dark-mode") === 'false' ? false : true,
|
|
show() {
|
|
this.visible = true;
|
|
},
|
|
close() {
|
|
this.visible = false;
|
|
},
|
|
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';
|
|
}
|
|
};
|
|
|
|
</script>
|
|
{{end}}
|