Pinafore-Web-Client-Frontend/routes/_components/NavItem.html

149 lines
3.4 KiB
HTML

<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>