forked from pkp/ui-library
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Navigation.vue
70 lines (65 loc) · 1.35 KB
/
Navigation.vue
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
<template>
<div class="flex h-screen">
<nav
class="text-xs border-l border-r border-light pl-4 pr-4 pt-4 leading-6"
:aria-label="ariaLabel"
>
<ul>
<li>
<PkpButton
:size-variant="collapsed ? 'default' : 'iconOnly'"
:icon="collapsed ? 'BackButton' : 'Expand'"
:inline="true"
@click="toggleNav"
>
Collapse Main Menu
</PkpButton>
</li>
<li
v-for="(link, index) in links"
:key="index"
class="mt-2"
:class="link.addMargin ? 'mt-8' : ''"
@click="handleClick(index)"
>
<PkpButton
element="a"
:href="link.url"
:is-active="link.isCurrent"
:is-secondary="!link.isCurrent"
:size-variant="collapsed ? 'default' : 'iconOnly'"
:icon="link.icon"
:inline-icon="true"
>
{{ link.name }}
</PkpButton>
</li>
</ul>
</nav>
</div>
</template>
<script setup>
import {defineProps, ref} from 'vue';
const props = defineProps({
links: {
type: Array,
required: true,
validator: (value) => {
return value.every((item) => 'name' in item);
},
},
ariaLabel: {
type: String,
default: 'Site Navigation',
},
});
const collapsed = ref(false);
function toggleNav() {
collapsed.value = !collapsed.value;
}
function handleClick(index) {
props.links.forEach((link, i) => {
link.isCurrent = i === index;
});
}
</script>