Bell Notification Menu

<div class='bn'><button type='button' id='bnb' aria-label='Notifications'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg><i id='bni'>2</i></button><div class='bn-p' id='bnp'><h6>Notifications</h6><p><b>New comment</b><span>Maya replied to your post</span></p><p><b>Build finished</b><span>Version 2.4 is ready</span></p><p class='m'>You are all caught up</p></div></div>

.bn{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.bn>button{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid #efefef;border-radius:11px;background:#fff;color:#444;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}.bn>button:hover{color:#111}.bn i{position:absolute;right:-7px;top:-8px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:99px;background:#222;color:#fff;font:700 10.5px/18px Inter,Arial,sans-serif;text-align:center;font-style:normal;transition:transform .2s}.bn i.h{transform:scale(0)}.bn-p{display:none;position:absolute;left:50%;top:100%;z-index:5;width:220px;margin:8px 0 0 -110px;padding:6px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);animation:bn-in .15s ease}.bn-p.on{display:block}.bn-p h6{margin:6px 8px;font-size:12px;font-weight:600;color:#8a8a8a;letter-spacing:.04em;text-transform:uppercase}.bn-p p{margin:0;padding:8px;border-radius:9px;font-size:13.5px}.bn-p p:not(.m):hover{background:#f4f4f4}.bn-p b,.bn-p span{display:block}.bn-p span{font-size:12.5px;color:#737373}.bn-p .m{text-align:center;font-size:12px;color:#a3a3a3}@keyframes bn-in{from{opacity:0;transform:translateY(-4px)}}

const b=document.getElementById('bnb'),p=document.getElementById('bnp'),n=document.getElementById('bni');b.addEventListener('click',()=>{p.classList.toggle('on');if(p.classList.contains('on'))n.classList.add('h')});document.addEventListener('mousedown',e=>{if(!b.parentNode.contains(e.target))p.classList.remove('on')});