BuddyPress.org

I just tested it and it worked here is my site to view it , view it on your desktop i haven’t added the bell to my mobile header yet

Let me how it goes for you

function register_bp_notification_bell_block() {
    // Inline JavaScript for the block
    $block_js = "
    (function (wp) {
        var registerBlockType = wp.blocks.registerBlockType;
        var el = wp.element.createElement;
        var withSelect = wp.data.withSelect;
        var __ = wp.i18n.__;

        registerBlockType('buddypress/notification-bell', {
            title: __('BuddyPress Notification Bell', 'buddypress'),
            icon: 'bell',
            category: 'widgets',
            edit: withSelect(function (select) {
                return {
                    userId: select('core').getCurrentUser().id
                };
            })(function (props) {
                var userId = props.userId;
                var unreadCount = 0;

                // Dummy content for editor preview
                if (!userId) {
                    return el(
                        'div',
                        { className: 'notification-bell' },
                        el('span', { className: 'bell-icon' }, '🔔'),
                        el('span', { className: 'unread-count' }, '0')
                    );
                }

                // Fetch notifications count
                wp.apiFetch({ path: '/wp-json/bp/v1/notifications/unread_count/' + userId }).then(function(count) {
                    unreadCount = count;
                    props.setAttributes({ unreadCount: unreadCount });
                });

                return el(
                    'a',
                    { className: 'notification-bell', href: '/members/' + userId + '/notifications/' },
                    el('span', { className: 'bell-icon' }, '🔔'),
                    unreadCount > 0 && el('span', { className: 'unread-count' }, unreadCount)
                );
            }),
            save: function () {
                return null;
            }
        });
    })(window.wp);
    ";

    // Enqueue inline script
    wp_add_inline_script('wp-blocks', $block_js);

    // Register the block type
    register_block_type('buddypress/notification-bell', array(
        'render_callback' => 'bp_notification_bell_block_render',
    ));
}
add_action('init', 'register_bp_notification_bell_block');

function bp_notification_bell_block_render($attributes) {
    if (!is_user_logged_in()) {
        return '';
    }

    $user_id = get_current_user_id();
    $unread_count = bp_notifications_get_unread_notification_count($user_id);
    $notifications_url = bp_loggedin_user_domain() . bp_get_notifications_slug() . '/';

    ob_start();
    ?>
    <a class="notification-bell" href="<?php echo esc_url($notifications_url); ?>">
        <span class="bell-icon">🔔</span>
        <?php if ($unread_count > 0) : ?>
            <span class="unread-count"><?php echo esc_html($unread_count); ?></span>
        <?php endif; ?>
    </a>
    <style>
        .notification-bell {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-decoration: none;
        }
        .bell-icon {
            font-size: 24px; /* Adjust the font size as needed */
            line-height: 30px; /* Match the container height */
            display: block;
            text-align: center;
        }
        .unread-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: red;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }
    </style>
    <?php
    return ob_get_clean();
}

add_action('rest_api_init', function() {
    register_rest_route('bp/v1', '/notifications/unread_count/(?P<user_id>\d+)', array(
        'methods' => 'GET',
        'callback' => 'get_bp_unread_notifications_count',
    ));
});

function get_bp_unread_notifications_count($request) {
    $user_id = $request['user_id'];
    if (!$user_id) {
        return new WP_Error('no_user', 'Invalid user ID', array('status' => 404));
    }

    return bp_notifications_get_unread_notification_count($user_id);
}