diff options
Diffstat (limited to 'web/html/component/aSidebar.html')
| -rw-r--r-- | web/html/component/aSidebar.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/web/html/component/aSidebar.html b/web/html/component/aSidebar.html new file mode 100644 index 00000000..dfaebb17 --- /dev/null +++ b/web/html/component/aSidebar.html @@ -0,0 +1,103 @@ +{{define "component/sidebar/content"}} +<template> + <div class="ant-sidebar"> + <a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed" + @collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md"> + <a-theme-switch></a-theme-switch> + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab" + @click="({key}) => openLink(key)"> + <a-menu-item v-for="tab in tabs" :key="tab.key"> + <a-icon :type="tab.icon"></a-icon> + <span v-text="tab.title"></span> + </a-menu-item> + </a-menu> + </a-layout-sider> + <a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible" + :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }"> + <div class="drawer-handle" @click="toggleDrawer" slot="handle"> + <a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon> + </div> + <a-theme-switch></a-theme-switch> + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab" + @click="({key}) => openLink(key)"> + <a-menu-item v-for="tab in tabs" :key="tab.key"> + <a-icon :type="tab.icon"></a-icon> + <span v-text="tab.title"></span> + </a-menu-item> + </a-menu> + </a-drawer> + </div> +</template> +{{end}} + +{{define "component/aSidebar"}} +<style> + .ant-sidebar>.ant-layout-sider { + height: 100%; + } +</style> + +<script> + const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed" + + Vue.component('a-sidebar', { + data() { + return { + tabs: [ + { + key: 'panel/', + icon: 'dashboard', + title: '{{ i18n "menu.dashboard"}}' + }, + { + key: 'panel/inbounds', + icon: 'user', + title: '{{ i18n "menu.inbounds"}}' + }, + { + key: 'panel/settings', + icon: 'setting', + title: '{{ i18n "menu.settings"}}' + }, + { + key: 'panel/xray', + icon: 'tool', + title: '{{ i18n "menu.xray"}}' + }, + { + key: 'logout/', + icon: 'logout', + title: '{{ i18n "menu.logout"}}' + }, + ], + activeTab: [ + '{{ .request_uri }}' + ], + visible: false, + collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)), + } + }, + methods: { + openLink(key) { + return key.startsWith('http') ? + window.open(`{{ .base_path }}${key}`) : + location.href = `{{ .base_path }}${key}` + }, + closeDrawer() { + this.visible = false; + }, + toggleDrawer() { + this.visible = !this.visible; + }, + collapseHandle(collapsed, type) { + if (type === "clickTrigger") { + localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed); + + this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)); + } + } + }, + template: `{{template "component/sidebar/content"}}`, + }); +</script> +{{end}}
\ No newline at end of file |