ABP: LeptonXLite 主题自定义 Siderbar 右上角折叠按钮

前言#

不管 Siderbar 处于收起还是展开状态，折叠按钮的图标都不会跟随状态改变，是一个固定的图标样式。

我需要根据不同的折叠状态显示不同的图标样式，又因为 LeptonXLite 主题的代码并不是开源的，所以找不到覆盖原代码的方式（在 Application Layout 中），所以通过 JavaScript 来更改默认的行为。

代码#

在 Web 项目的 wwwroot\global.js 中加入以下代码：

/** 根据状态自动切换侧边栏右上角折叠按钮图标 */
function autoToggleSidebarMenuCollapseIcon() {
    const menuDomSelector = '.menu-collapse-icon';
    const localStoreKey = 'lpx:side-menu-state';
    const iconClasses = {
        lpxDefault: 'bi bi-filter-left',
        left: 'fa-solid fa-circle-chevron-left',
        right: 'fa-solid fa-circle-chevron-right',
    };

    // 设置为箭头朝左的图标
    function setLeft() {
        $(menuDomSelector)
            .removeClass(iconClasses.lpxDefault + ' ' + iconClasses.right)
            .addClass(iconClasses.left);
    }

    // 设置为箭头朝右的图标
    function setRight() {
        $(menuDomSelector)
            .removeClass(iconClasses.lpxDefault + ' ' + iconClasses.left)
            .addClass(iconClasses.right);
    }

    // 根据 localStorage 存储的状态切换图标
    function toggleSidebarMenuCollapseIconClass() {
        // true：已收起，false：已展开
        const isCollapsed = localStorage.getItem(localStoreKey) === '1';
        isCollapsed ? setRight() : setLeft();
    }

    $(menuDomSelector).on('click', function () {
        // 这里使用 setTimeout 是因为 lpx 主题代码中已经监听了点击事件，会设置 localStorage，但多个点击事件的顺序不确定，所以这里延迟一下
        // 大概率可以保证在 lpx 主题代码的点击事件之后执行图标切换
        setTimeout(() => toggleSidebarMenuCollapseIconClass(), 0);
    });

    toggleSidebarMenuCollapseIconClass();
}

autoToggleSidebarMenuCollapseIcon();