Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | ;
<template>
<li class="dropdown">
<nuxt-link class="navbar-link d-flex align-items-start position-relative" :to="'/favorites'">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-heart icon" viewBox="0 0 16 16" aria-labelledby="favoriteIcon">
<title id="favoriteIcon">Favorite icon</title>
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<span
class="d-inline-flex justify-content-center text-center position-absolute">{{ this.favItemsLength }}</span>
</nuxt-link>
</li>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
computed: {
...mapGetters(['favoriteItems']),
/**
* Get how many items are in the favorite list
* @see favItemsLength
* @returns number
*/
favItemsLength() {
return Object.values(this.favoriteItems).reduce((total, curr) => total + curr.length, 0);
}
}
}
</script>
<style lang="scss" scoped>
span {
width: 0.8rem;
height: 0.8rem;
background-color: rgb(154, 117, 63);
border-radius: 100%;
color: white;
text-decoration: none;
font-size: 0.6rem;
right: -0.2rem;
bottom: -0.2rem;
}
@include media-breakpoint-down(lg) {
span {
width: 1rem;
height: 1rem;
font-size: .8rem;
right: 0.1rem;
}
}
@include media-breakpoint-down(sm) {
span {
width: .7rem;
height: .7rem;
font-size: .5rem;
right: 0;
}
}
@media screen and #{$ipad-pro-landscape-breakpoint},
screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-landscape-breakpoint} {
span {
width: 1.6rem;
height: 1.6rem;
font-size: 1.1rem;
right: 0.2rem;
}
}
</style>
|