<NavLink key={chatroom.id} to={`/chatrooms/${chatroom.id}`} className={`active-chatroom ${chatroom.unread_message_count > 0 ? "unread" : ""} `}>
                            <li className={`chatroom-name chatroom-channel-names flex ${chatroom.unread_message_count > 0 ? "unread" : ""}`}>
                                    <div className="chatroom-name-div">
                                    ◦ <span className='direct-message-name'>{ chatroom.users.join(", ") || "" }</span>
                                    </div>