<div class="container py-5 text-center">
  <div class="dropdown">
    <button class="btn btn-light position-relative" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      <span class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle" id="bsnotifBadge">3</span>
    </button>
    <div class="dropdown-menu dropdown-menu-end bsnotif-panel p-0">
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
        <strong class="small">Notifications</strong>
        <button class="btn btn-link btn-sm p-0" id="bsnotifReadAll">Mark all read</button>
      </div>
      <div id="bsnotifList">
        <a href="javascript:void(0)" class="dropdown-item bsnotif-item bsnotif-unread py-2">
          <div class="d-flex gap-2"><span class="bsnotif-dot"></span><div><div class="small">Sara commented on your PR</div><div class="text-muted" style="font-size:11px">2m ago</div></div></div>
        </a>
        <a href="javascript:void(0)" class="dropdown-item bsnotif-item bsnotif-unread py-2">
          <div class="d-flex gap-2"><span class="bsnotif-dot"></span><div><div class="small">Deploy to production succeeded</div><div class="text-muted" style="font-size:11px">1h ago</div></div></div>
        </a>
        <a href="javascript:void(0)" class="dropdown-item bsnotif-item bsnotif-unread py-2">
          <div class="d-flex gap-2"><span class="bsnotif-dot"></span><div><div class="small">Weekly report is ready</div><div class="text-muted" style="font-size:11px">3h ago</div></div></div>
        </a>
      </div>
    </div>
  </div>
</div>

.bsnotif-panel { width: 300px; }
.bsnotif-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; margin-top: 5px; flex-shrink: 0; }
.bsnotif-item.bsnotif-unread { background: #f8f9ff; }
.bsnotif-item:not(.bsnotif-unread) .bsnotif-dot { background: transparent; }

const badge = document.getElementById('bsnotifBadge');
const list = document.getElementById('bsnotifList');
const readAllBtn = document.getElementById('bsnotifReadAll');

function updateBadge() {
  const unread = document.querySelectorAll('.bsnotif-unread').length;
  badge.textContent = unread;
  badge.style.display = unread > 0 ? '' : 'none';
}

// Clicking one notification marks only that one read. The dropdown stays
// open through that click because of the trigger's data-bs-auto-close="outside"
// attribute — Bootstrap's default (autoClose: true) closes on ANY click inside
// the menu too, not just outside it, which would dismiss the panel after the
// very first notification a visitor tried to read.
list.addEventListener('click', e => {
  const item = e.target.closest('.bsnotif-item');
  if (!item) return;
  item.classList.remove('bsnotif-unread');
  updateBadge();
});

readAllBtn.addEventListener('click', () => {
  document.querySelectorAll('.bsnotif-unread').forEach(item => item.classList.remove('bsnotif-unread'));
  updateBadge();
});

updateBadge();