Good Day to All,

I have a question regarding a custom component on Experience Builder. I created a custom notification in the community and even though the condition of the notification badge is correct the badge does not disappear when I read my message/s. Here are my codes.

HTML:

<template>
    <div class={messageBadge}>
        <i class="inbox__icon fal fa-inbox" style = "font-size: 2em;" onclick={navigateToMessage}></i>
    </div>
</template>

CSS:

.inbox {
    cursor: pointer;
    display: block;
    position: relative;
    width: 25px;
}
.inbox__icon{
    align-items: center;
    color: var(--lwc-colorTextDefault);
    cursor: pointer;
    font-size: 50px;
    justify-content: center;
}
.inbox-unread::before{
    background-color: var(--lwc-colorBorder);
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 20px;
    position: absolute;
    top: 0;
    width: 10px;
}

JS:

import { LightningElement, track , api} from 'lwc';
import {NavigationMixin} from "lightning/navigation";
import communityId from '@salesforce/community/Id';
import getMessages from '@salesforce/apex/AS_customTopbarNotification.getMessages';
export default class AS_InboxMessage extends NavigationMixin(LightningElement)
{
    @api getMessages;
    communityId = communityId;
        navigateToMessage(event){
       
            console.log('clicked');
            const url = '/messages/Home';
            console.log(url);
       
            this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url : url
                }
            });
            }
        connectedCallback() {
            getMessages({
                communityId : this.communityId
            }).then((result) => {
                    console.log(result);
                    this.getMessages = result;
            }).catch((error) =>{
                    console.log(error);
            });
        }
    get messageBadge() {
        if(this.getMessages != null){
            return this.getMessages ? 'inbox-unread' : 'inbox';
        }else{
            return 'inbox';
        }
    }
}

JS-META.XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>AS Message Inbox</masterLabel>
    <targets>
        <target>lightningCommunity__Default</target>
        <target>lightningCommunity__Page</target>
    </targets>
</LightningComponentBundle>

APEX CLASS:​

public with sharing class AS_customTopbarNotification{
    
    @AuraEnabled
    public static Boolean getMessages(String communityId) {
        
        ConnectApi.FeedElementPage unread = ConnectApi.ChatterFeeds.getFeedElementsFromFeed(communityId, ConnectApi.FeedType.DirectMessages);
        Boolean hasUnread = false;
        
        for (ConnectApi.FeedElement feedEl : unread.elements) {
            if (!feedEl.capabilities.readBy.isReadByMe) {
                hasUnread = true;
                break;
            }
        }
        System.debug('hasUnread ' + hasUnread);
        return hasUnread;
    }
}



This is LWC if anyone is wondering.

Thanks in advance.​​​​​​