feat: Update notification count display with improved styling and accessibility

- Enhanced the notification count element with a border for better visibility.
- Added a hidden span element to maintain layout consistency when the notification count is zero.
This commit is contained in:
StarFleetCPTN
2025-04-11 18:14:41 -07:00
parent dc6209dbc1
commit 856a8403b3
+4 -1
View File
@@ -177,12 +177,15 @@ templ NotificationDropdown(data NotificationsData) {
templ NotificationCount(count int64) {
if count > 0 {
<div class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full -top-1 -right-1" id="notification-count">
<div class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 border border-white dark:border-gray-800 rounded-full -translate-y-1/2 translate-x-1/2" style="top: 0; right: 0;" id="notification-count">
if count > 99 {
99+
} else {
{ fmt.Sprintf("%d", count) }
}
</div>
} else {
<!-- Empty element to ensure proper swap when count is zero -->
<span class="hidden"></span>
}
}