| 1 | <html> |
| 2 | <head> |
| 3 | <script type="module"> |
| 4 | import { store } from "/components/notifications/notification-store.js"; |
| 5 | </script> |
| 6 | </head> |
| 7 | <body> |
| 8 | <div x-data> |
| 9 | <template x-if="$store.notificationStore"> |
| 10 | <!-- Notification Toggle Button --> |
| 11 | <div class="notification-toggle" |
| 12 | :class="{ |
| 13 | 'has-unread': $store.notificationStore.unreadPrioCount > 0, |
| 14 | 'has-notifications': $store.notificationStore.notifications.length > 0 |
| 15 | }" |
| 16 | @click="$store.notificationStore.openModal()" |
| 17 | title="View Notifications"> |
| 18 | <div class="notification-icon"> |
| 19 | <x-icon name="notifications"></x-icon> |
| 20 | </div> |
| 21 | <span x-show="$store.notificationStore.unreadPrioCount > 0" |
| 22 | class="notification-badge" |
| 23 | x-text="$store.notificationStore.unreadPrioCount"></span> |
| 24 | </div> |
| 25 | </template> |
| 26 | </div> |
| 27 | </body> |
| 28 | </html> |