{{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/setting">
    <a-icon type="setting"></a-icon>
    <span>{{ i18n "menu.setting"}}</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") === 'true' ? true : false,
        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}}