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();