diff options
| author | Adam Soltys <[email protected]> | 2026-03-06 08:39:18 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-03-06 08:39:18 -0800 |
| commit | 7e45e1b48c382f29c2d3bd114a4751a0f6b89d51 (patch) | |
| tree | 7cbfc937afdcccab812d7f97c8f85b681c0d4687 /src/components | |
| parent | 3b18232d52957dbd1a5a0c12891020d2a6e3295e (diff) | |
| download | coinos-ui-7e45e1b48c382f29c2d3bd114a4751a0f6b89d51.tar.gz coinos-ui-7e45e1b48c382f29c2d3bd114a4751a0f6b89d51.zip | |
group chats
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Menu.svelte | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte index 9803e7a2..b1fae7a9 100644 --- a/src/components/Menu.svelte +++ b/src/components/Menu.svelte @@ -8,7 +8,7 @@ import PhMoonStarsBold from "virtual:icons/ph/moon-stars-bold"; import PhSignOutBold from "virtual:icons/ph/sign-out-bold"; import CoinosLogo from "virtual:icons/coinos/logo"; - import { theme } from "$lib/store"; + import { theme, unreadDMs } from "$lib/store"; import DarkToggle from "$comp/DarkToggle.svelte"; let { t, user, w, opacity } = $props(); @@ -36,8 +36,11 @@ </script> <div use:clickOutside={hideMenu}> - <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu"> + <button class="relative flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu"> <PhListBold width={w > 640 ? 32 : 24} /> + {#if $unreadDMs > 0} + <span class="badge-dot">{$unreadDMs > 99 ? "99+" : $unreadDMs}</span> + {/if} </button> <div @@ -57,10 +60,13 @@ onclick={hideMenu} > <button - class="flex justify-center items-center font-semibold hover:opacity-80 gap-2" + class="relative flex justify-center items-center font-semibold hover:opacity-80 gap-2" > <Icon width="32" /> {t(key)} + {#if key === "nav.dm" && $unreadDMs > 0} + <span class="badge-dot">{$unreadDMs > 99 ? "99+" : $unreadDMs}</span> + {/if} </button> </a> {/if} @@ -73,3 +79,21 @@ </a> </div> </div> + +<style> + .badge-dot { + position: absolute; + top: -2px; + right: -2px; + min-width: 18px; + height: 18px; + padding: 0 4px; + border-radius: 9px; + background: #f97316; + color: white; + font-size: 11px; + font-weight: 700; + line-height: 18px; + text-align: center; + } +</style> |