alice.pds.demo.boltless.dev
This repository has no description
1{{define "notifications/fragments/bell"}}
2<style>
3 #notif-bell-btn {
4 anchor-name: --notif-bell;
5 }
6 #notif-popup {
7 position-anchor: --notif-bell;
8 position-area: bottom span-left;
9 }
10</style>
11 {{/* mobile - lnik to notifications page */}}
12 <a href="/notifications"
13 class="md:hidden relative text-gray-500 dark:text-gray-400 flex gap-1 items-end"
14 hx-get="/notifications/count"
15 hx-target="#notification-count-mobile"
16 hx-trigger="load, every 30s">
17 {{ i "bell" "size-5" }}
18 <span id="notification-count-mobile"></span>
19 </a>
20
21 {{/* desktop popover button */}}
22 <button
23 id="notif-bell-btn"
24 popovertarget="notif-popup"
25 popovertargetaction="toggle"
26 class="hidden md:flex relative text-gray-500 dark:text-gray-400 gap-1 items-end cursor-pointer"
27 hx-get="/notifications/count"
28 hx-target="#notification-count-desktop"
29 hx-trigger="load, every 30s">
30 {{ i "bell" "size-5" }}
31 <span id="notification-count-desktop"></span>
32 </button>
33
34 <div
35 popover
36 id="notif-popup"
37 hx-get="/notifications/preview?read=unread"
38 hx-trigger="toggle[newState=='open'] once"
39 hx-swap="innerHTML"
40 class="mt-1 w-[36rem] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded drop-shadow-lg dark:text-white p-0 overflow-hidden">
41 <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
42 {{ i "loader-circle" "size-4 animate-spin mx-auto" }}
43 </div>
44 </div>
45{{end}}