const notificationMenu = document.getElementById("notification-menu");
const notificationBell = document.getElementById("noti-bell");

notificationBell.addEventListener("click", function() {
  if (notificationMenu.style.display = 'none') {
    notificationMenu.style.display = 'block'
  } else {
    notificationMenu.style.display = 'none'
  }
});

.notification-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  position: absolute;
  height: 250px;
  width: 350px;
  left: 58vw;
  bottom: 66vh;
  background-color: white;
  border: solid 2px #686de0;
  z-index: 1;
  font-size: 14px;
  display: none;
}

<span class="noti-bell" id="noti-bell"><i class="fa-solid fa-bell"></i></span>

<div id="notification-menu" class="notification-menu">
  <span class="noti-menu-header">Notifications<a href="#" class="read notifications">Mark all as read</a></span>
  <ul>
    <li><a href="#"><span>You Have 1 New Task!</span></a></li>
    <li><a href="#"><span>You Have 1 New Reminder!</span></a></li>
    <li><a href="#"><span>You Have 1 New Note!</span></a></li>
    <li><a href="#">You Have 2 New Events!</a></li>
    <a href="#"><span class="clear-notifications">Clear Notifications</span></a>
  </ul>
</div>