<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="chatroom-channel-name">{ chatroom.title.replace(/\s+/g, '-').toLowerCase() }</span>
                                </div>