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