ABP: LeptonXLite Customizing the Siderbar Collapse Button in the Upper Right Corner

Preface#

Regardless of whether the Siderbar is in a collapsed or expanded state, the icon of the collapse button will not change with the state. It is a fixed icon style.

I need to display different icon styles based on different collapse states. However, because the code of the LeptonXLite theme is not open source, I cannot find a way to override the original code (in the Application Layout). Therefore, I will use JavaScript to change the default behavior.

Code#

Add the following code to wwwroot\global.js in your web project:

/** Automatically switch the collapse button icon in the upper right corner of the sidebar based on its state */
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',
    };

    // Set the icon to face left
    function setLeft() {
        $(menuDomSelector)
            .removeClass(iconClasses.lpxDefault + ' ' + iconClasses.right)
            .addClass(iconClasses.left);
    }

    // Set the icon to face right
    function setRight() {
        $(menuDomSelector)
            .removeClass(iconClasses.lpxDefault + ' ' + iconClasses.left)
            .addClass(iconClasses.right);
    }

    // Toggle the icon based on the state stored in localStorage
    function toggleSidebarMenuCollapseIconClass() {
        // true: collapsed, false: expanded
        const isCollapsed = localStorage.getItem(localStoreKey) === '1';
        isCollapsed ? setRight() : setLeft();
    }

    $(menuDomSelector).on('click', function () {
        // The setTimeout is used here because the lpx theme code already listens for click events and sets localStorage.
        // However, the order of multiple click events is uncertain, so here we delay the execution of icon switching.
        // This will most likely ensure that the icon switching is performed after the click event in the lpx theme code.
        setTimeout(() => toggleSidebarMenuCollapseIconClass(), 0);
    });

    toggleSidebarMenuCollapseIconClass();
}

autoToggleSidebarMenuCollapseIcon();