add notification badge

This commit is contained in:
Nolan Lawson 2018-02-15 22:21:23 -08:00
parent 3f264e476c
commit 29761d8e45

View file

@ -2,10 +2,23 @@
aria-label='{{forceCurrent || page === name ? `${label} (current page)` : label}}' aria-label='{{forceCurrent || page === name ? `${label} (current page)` : label}}'
aria-current="{{forceCurrent || page === name}}" aria-current="{{forceCurrent || page === name}}"
href='{{href}}'> href='{{href}}'>
<svg> {{#if name === 'notifications'}}
<use xlink:href="{{svg}}" /> <div class="nav-link-svg-wrapper">
</svg> <svg>
<span>{{label}}</span> <use xlink:href="{{svg}}" />
</svg>
{{#if numberOfNotifications}}
<span class="nav-link-notifications" aria-hidden="true">
{{numberOfNotifications}}
</span>
{{/if}}
</div>
{{else}}
<svg>
<use xlink:href="{{svg}}" />
</svg>
{{/if}}
<span class="nav-link-label">{{label}}</span>
</a> </a>
<style> <style>
.main-nav-link { .main-nav-link {
@ -17,6 +30,30 @@
align-items: center; align-items: center;
} }
.nav-link-svg-wrapper {
position: relative;
display: inline-block;
}
.nav-link-notifications {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(10px, 7px);
z-index: 10;
border: 1px solid var(--nav-bg);
background: var(--nav-svg-fill);
color: var(--nav-bg);
border-radius: 100%;
font-size: 0.9em;
margin: 3px 0;
}
.main-nav-link.selected { .main-nav-link.selected {
border-bottom: 1px solid var(--nav-a-selected-border); border-bottom: 1px solid var(--nav-a-selected-border);
background: var(--nav-a-selected-bg); background: var(--nav-a-selected-bg);
@ -32,7 +69,7 @@
border-bottom: 1px solid var(--nav-a-border-hover); border-bottom: 1px solid var(--nav-a-border-hover);
} }
.main-nav-link:hover span { .main-nav-link:hover .nav-link-label {
color: var(--nav-text-color-hover); color: var(--nav-text-color-hover);
} }
.main-nav-link:hover svg { .main-nav-link:hover svg {
@ -46,7 +83,7 @@
fill: var(--nav-svg-fill); fill: var(--nav-svg-fill);
} }
.main-nav-link span { .main-nav-link .nav-link-label {
font-size: 16px; font-size: 16px;
color: var(--nav-text-color); color: var(--nav-text-color);
padding-left: 10px; padding-left: 10px;
@ -56,7 +93,7 @@
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.main-nav-link span { .main-nav-link .nav-link-label {
display: none; display: none;
} }
.main-nav-link svg { .main-nav-link svg {
@ -66,8 +103,27 @@
.main-nav-link { .main-nav-link {
padding: 20px 0; padding: 20px 0;
} }
.nav-link-notifications {
transform: translate(15px, 7px);
margin: 3px 1px 4px;
}
} }
</style> </style>
<script> <script>
import { store } from '../_store/store'
export default {
store: () => store,
computed: {
numberOfNotifications: ($timelines, $currentInstance, $currentTimeline) => {
return $currentTimeline !== 'notifications' &&
$timelines &&
$timelines[$currentInstance] &&
$timelines[$currentInstance].notifications &&
$timelines[$currentInstance].notifications.itemIdsToAdd &&
$timelines[$currentInstance].notifications.itemIdsToAdd.length
}
}
}
</script> </script>