Customize Side Navigation Icons Conditionally

SureDash provides a way to dynamically customize the side navigation icons based on specific conditions such as user roles, login status, or space ID.

This can be done using the suredash_aside_navigation_space_icon_{post_id} filter and SureDash action hooks.

Filter Reference

Parameters:

Action Reference

Usage Example

Below is an example implementation that replaces the default navigation icon for administrators with a custom SVG icon.

/**
 * Update the navigation space icon based on conditions.
 *
 * @param string $icon    Icon HTML.
 * @param int    $post_id Space post ID.
 *
 * @return string
 */
function update_navigation_space_icon( $icon, $post_id ) {
    // Keep the default icon for logged-in users.
    if ( is_user_logged_in() ) {
        return $icon;
    }

    // Replace the icon for admins.
    if ( current_user_can( 'manage_options' ) ) {
        $icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple-icon lucide-apple"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"/><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"/></svg>';
    }

    return $icon;
}

Attaching and Removing the Filter

Use the following helper functions to attach and detach the filter dynamically for each space.

/**
 * Attach the filter to customize icons.
 *
 * @param int $post_id Space post ID.
 */
function check_restriction_navigation_space_icon( $post_id ): void {
    add_filter( 'suredash_aside_navigation_space_icon_' . $post_id, 'update_navigation_space_icon', 10, 2 );
}

/**
 * Remove the filter after rendering.
 *
 * @param int $post_id Space post ID.
 */
function revert_navigation_space_icon( $post_id ): void {
    remove_filter( 'suredash_aside_navigation_space_icon_' . $post_id, 'update_navigation_space_icon' );
}

Hooking into SureDash Actions

Attach these functions to SureDash actions so the customization applies when rendering the navigation.

add_action( 'suredash_before_title_block', 'check_restriction_navigation_space_icon', 10, 1 );
add_action( 'suredash_after_title_block', 'revert_navigation_space_icon', 10, 1 );

add_action( 'suredash_before_aside_navigation_item', 'check_restriction_navigation_space_icon', 10, 1 );
add_action( 'suredash_after_aside_navigation_item', 'revert_navigation_space_icon', 10, 1 );

Key Notes

• Always remove the filter after rendering to prevent unintended side effects.
• The filter is space-specific since it uses the $post_id in the hook name.
• Use SVG icons from Lucide Icons for consistency.