<a class='main-nav-link {{selected ? "selected" : ""}}' aria-label='{{ariaLabel}}' aria-current="{{selected}}" on:click="onClick(event)" :href > {{#if name === 'notifications'}} <div class="nav-link-svg-wrapper"> <svg class="nav-link-svg"> <use xlink:href="{{svg}}" /> </svg> {{#if $hasNotifications}} <span class="nav-link-notifications" aria-hidden="true"> {{$numberOfNotifications}} </span> {{/if}} </div> {{else}} <svg class="nav-link-svg"> <use xlink:href="{{svg}}" /> </svg> {{/if}} <span class="nav-link-label">{{label}}</span> </a> <style> .main-nav-link { border-bottom: 1px solid var(--nav-a-border); text-decoration: none; padding: 15px 20px; display: flex; justify-content: center; align-items: center; flex: 1; } .nav-link-svg-wrapper { position: relative; display: inline-block; } .nav-link-svg-wrapper, .nav-link-svg { width: 20px; height: 20px; } .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 { border-bottom: 1px solid var(--nav-a-selected-border); background: var(--nav-a-selected-bg); } .main-nav-link.selected:hover { border-bottom: 1px solid var(--nav-a-selected-border-hover); background: var(--nav-a-selected-bg-hover); } .main-nav-link:hover { background-color: var(--nav-a-bg-hover); border-bottom: 1px solid var(--nav-a-border-hover); text-decoration: none; } .main-nav-link:hover .nav-link-label { color: var(--nav-text-color-hover); } .main-nav-link:hover .nav-link-svg { fill: var(--nav-svg-fill-hover); } .nav-link-svg { display: inline-block; fill: var(--nav-svg-fill); } .nav-link-label { font-size: 16px; color: var(--nav-text-color); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 991px) { .main-nav-link .nav-link-label { display: none; } .nav-link-svg-wrapper, .nav-link-svg { width: 25px; height: 25px; } .main-nav-link { padding: 20px 0; } .nav-link-notifications { transform: translate(15px, 7px); margin: 3px 1px 4px; } } </style> <script> import { store } from '../_store/store' import { smoothScrollToTop } from '../_utils/smoothScrollToTop' export default { store: () => store, computed: { selected: (page, name) => page === name, ariaLabel: (selected, name, label, $numberOfNotifications) => { let res = label if (selected) { res += ' (current page)' } if (name === 'notifications' && $numberOfNotifications) { res += ` (${$numberOfNotifications})` } return res } }, methods: { onClick(e) { if (!this.get('selected')) { return } e.preventDefault() e.stopPropagation() smoothScrollToTop(document.getElementsByClassName('container')[0]) } } } </script>