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

134 lines
2.9 KiB
HTML
Raw Normal View History

2018-02-16 07:58:18 +01:00
<a class='main-nav-link {{page === name ? "selected" : ""}}'
aria-label='{{ariaLabel}}'
aria-current="{{page === name}}"
:href >
2018-02-16 07:21:23 +01:00
{{#if name === 'notifications'}}
<div class="nav-link-svg-wrapper">
<svg>
<use xlink:href="{{svg}}" />
</svg>
2018-02-16 17:59:44 +01:00
{{#if $hasNotifications}}
2018-02-16 07:21:23 +01:00
<span class="nav-link-notifications" aria-hidden="true">
2018-02-16 17:59:44 +01:00
{{$numberOfNotifications}}
2018-02-16 07:21:23 +01:00
</span>
{{/if}}
</div>
{{else}}
<svg>
<use xlink:href="{{svg}}" />
</svg>
{{/if}}
<span class="nav-link-label">{{label}}</span>
2018-01-13 08:24:05 +01:00
</a>
<style>
.main-nav-link {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-border);
text-decoration: none;
padding: 25px 20px;
display: flex;
justify-content: center;
align-items: center;
}
2018-02-16 07:21:23 +01:00
.nav-link-svg-wrapper {
position: relative;
display: inline-block;
2018-02-16 18:04:04 +01:00
width: 25px;
height: 25px;
2018-02-16 07:21:23 +01:00
}
.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 {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-selected-border);
background: var(--nav-a-selected-bg);
}
.main-nav-link.selected:hover {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-selected-border-hover);
background: var(--nav-a-selected-bg-hover);
}
.main-nav-link:hover {
2018-01-13 08:24:05 +01:00
background-color: var(--nav-a-bg-hover);
border-bottom: 1px solid var(--nav-a-border-hover);
2018-03-14 15:24:24 +01:00
text-decoration: none;
2018-01-13 08:24:05 +01:00
}
2018-02-16 07:21:23 +01:00
.main-nav-link:hover .nav-link-label {
2018-01-13 08:24:05 +01:00
color: var(--nav-text-color-hover);
}
.main-nav-link:hover svg {
2018-01-13 08:24:05 +01:00
fill: var(--nav-svg-fill-hover);
}
.main-nav-link svg {
2018-01-13 08:24:05 +01:00
width: 20px;
height: 20px;
display: inline-block;
fill: var(--nav-svg-fill);
}
2018-02-16 07:21:23 +01:00
.main-nav-link .nav-link-label {
2018-01-13 08:24:05 +01:00
font-size: 16px;
color: var(--nav-text-color);
padding-left: 10px;
2018-01-23 06:16:27 +01:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2018-01-13 08:24:05 +01:00
}
2018-02-09 03:01:00 +01:00
@media (max-width: 991px) {
2018-02-16 07:21:23 +01:00
.main-nav-link .nav-link-label {
2018-01-13 08:24:05 +01:00
display: none;
}
.main-nav-link svg {
2018-01-13 08:24:05 +01:00
width: 25px;
height: 25px;
}
2018-01-29 00:53:49 +01:00
.main-nav-link {
2018-01-31 07:40:40 +01:00
padding: 20px 0;
2018-01-29 00:53:49 +01:00
}
2018-02-16 07:21:23 +01:00
.nav-link-notifications {
transform: translate(15px, 7px);
margin: 3px 1px 4px;
}
2018-01-13 08:24:05 +01:00
}
</style>
<script>
2018-02-16 07:21:23 +01:00
import { store } from '../_store/store'
export default {
store: () => store,
computed: {
2018-02-16 17:59:44 +01:00
ariaLabel: (page, name, label, $numberOfNotifications) => {
2018-02-16 07:58:18 +01:00
let res = label
if (page === name) {
res += ' (current page)'
}
2018-02-19 02:28:08 +01:00
if (name === 'notifications' && $numberOfNotifications) {
2018-02-16 17:59:44 +01:00
res += ` (${$numberOfNotifications})`
2018-02-16 07:58:18 +01:00
}
return res
2018-02-16 07:21:23 +01:00
}
}
}
2018-01-13 08:24:05 +01:00
</script>