<!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex justify-content-center align-items-center p-1">
        <div>
          <i class="icon bi bi-bell" id="bell"></i>
          <div class="notifications " id="box">
            <h2>Notifications - <span>2</span></h2>
            <div class="notifications-item">
              <div class="text">
                <p>Samso Nagaro Like your home work</p>
              </div>
            </div>
            <div class="notifications-item">
              <div class="text">
                <p>+20 vista badge earned</p>
              </div>
            </div>
          </div>
        </div>

          <script>
            $(document).ready(function(){
        
            var down = false;
            
            $('#bell').click(function(e){
              
                var color = $(this).text();
                if(down){
                    
                    $('#box').css('height','0px');
                    $('#box').css('opacity','0');
                    down = false;
                }else{
                    
                    $('#box').css('height','auto');
                    $('#box').css('opacity','1');
                    down = true;
                    
                }
                
            });
                
                });
          </script>

          <style>
            .icon {
              cursor: pointer;
              margin-right: 5px;
              /* line-height: 60px; */
            }
            .icon span {
              background: #f00;
              padding: 7px;
              border-radius: 50%;
              color: #fff;
              vertical-align: top;
              /* margin-left: -25px; */
            }
            .icon img {
              display: inline-block;
              width: 26px;
              margin-top: 4px;
            }
            .icon:hover {
              opacity: 0.7;
            }
            .logo {
              flex: 1;
              margin-left: 50px;
              color: #eee;
              font-size: 20px;
              font-family: monospace;
            }
            .notifications {
              width: 300px;
              height: 0px;
              opacity: 0;
              position: absolute;
              top: 63px;
              right: 62px;
              border-radius: 5px 0px 5px 5px;
              background-color: #fff;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
               0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .notifications h2 {
              font-size: 14px;
              padding: 10px;
              border-bottom: 1px solid #eee;
              color: #999;
            }
            .notifications h2 span {
              color: #f00;
            }
            .notifications-item {
              display: flex;
              border-bottom: 1px solid #eee;
              padding: 6px 9px;
              margin-bottom: 0px;
              cursor: pointer;
            }
            .notifications-item:hover {
              background-color: #eee;
            }
            .notifications-item img {
              display: block;
              width: 50px;
              height: 50px;
              margin-right: 9px;
              border-radius: 50%;
              margin-top: 2px;
            }
            .notifications-item .text h4 {
              color: #777;
              font-size: 16px;
              margin-top: 3px;
            }
            .notifications-item .text p {
              color: #aaa;
              font-size: 12px;
            }
          </style>
        <div>
          <span class="text-white fs-small p-0">Diane Ward</span>
        </div>
        <div class="p-3">
          <img
            src="./asset/Ellipse 461.svg"
            alt="user-icon"
            style="width: 2.5rem"
          />
        </div>
      </div>