Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

fix: add badge to bottom bar notifications icon (#1722)

Browse source
This commit is contained in:
Daniel Roe 2023-02-12 15:39:05 +01:00 committed by GitHub
parent 059c1c7b33
commit 37036b4ca6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/nav/NavBottom.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
// only one icon can be lit up at the same time // only one icon can be lit up at the same time
const moreMenuVisible = ref(false) const moreMenuVisible = ref(false)
const { notifications } = useNotifications()
</script> </script>
<template> <template>
@ -18,7 +20,12 @@ const moreMenuVisible = ref(false)
<div i-ri:search-line /> <div i-ri:search-line />
</NuxtLink> </NuxtLink>
<NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop"> <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:notification-4-line /> <div flex relative>
<div class="i-ri:notification-4-line" text-xl />
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
{{ notifications < 10 ? notifications : '•' }}
</div>
</div>
</NuxtLink> </NuxtLink>
<NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop"> <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:at-line /> <div i-ri:at-line />