]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <div v-cloak v-if="links" class="container-fluid"> | |
3 | <nav class="navbar" role="navigation" aria-label="main navigation"> | |
4 | <div class="container"> | |
5 | <div class="navbar-brand"> | |
e0a72b7d IB |
6 | <SearchInput |
7 | class="search-bar search-bar-mobile is-hidden-desktop" | |
8 | @input="filterServices" | |
9 | @search:open="navigateToFirstService" | |
10 | @search:cancel="filterServices" | |
11 | /> | |
b9c5fcf0 BW |
12 | <a |
13 | role="button" | |
14 | aria-label="menu" | |
15 | aria-expanded="false" | |
16 | class="navbar-burger" | |
17 | :class="{ 'is-active': showMenu }" | |
18 | v-on:click="$emit('navbar:toggle')" | |
19 | > | |
20 | <span aria-hidden="true"></span> | |
21 | <span aria-hidden="true"></span> | |
22 | <span aria-hidden="true"></span> | |
23 | </a> | |
24 | </div> | |
25 | <div class="navbar-menu" :class="{ 'is-active': showMenu }"> | |
26 | <div class="navbar-start"> | |
27 | <a | |
28 | class="navbar-item" | |
3bf0edcf | 29 | rel="noreferrer" |
b9c5fcf0 BW |
30 | v-for="link in links" |
31 | :key="link.url" | |
32 | :href="link.url" | |
33 | :target="link.target" | |
34 | > | |
35 | <i | |
36 | v-if="link.icon" | |
37 | style="margin-right: 6px;" | |
38 | :class="link.icon" | |
39 | ></i> | |
40 | {{ link.name }} | |
41 | </a> | |
42 | </div> | |
43 | <div class="navbar-end"> | |
44 | <slot></slot> | |
e0a72b7d IB |
45 | |
46 | <SearchInput | |
47 | class="navbar-item is-inline-block-mobile is-hidden-touch" | |
48 | @input="filterServices" | |
49 | @search:open="navigateToFirstService" | |
50 | @search:cancel="filterServices" | |
51 | /> | |
b9c5fcf0 BW |
52 | </div> |
53 | </div> | |
54 | </div> | |
55 | </nav> | |
56 | </div> | |
57 | </template> | |
58 | ||
59 | <script> | |
e0a72b7d IB |
60 | import SearchInput from "./SearchInput.vue"; |
61 | ||
b9c5fcf0 BW |
62 | export default { |
63 | name: "Navbar", | |
e0a72b7d IB |
64 | components: { |
65 | SearchInput, | |
66 | }, | |
b9c5fcf0 BW |
67 | props: { |
68 | open: { | |
69 | type: Boolean, | |
70 | default: false, | |
71 | }, | |
72 | links: Array, | |
e0a72b7d IB |
73 | navigateToFirstService: { type: Function }, |
74 | filterServices: { type: Function }, | |
b9c5fcf0 BW |
75 | }, |
76 | computed: { | |
77 | showMenu: function () { | |
78 | return this.open && this.isSmallScreen(); | |
79 | }, | |
80 | }, | |
81 | methods: { | |
82 | isSmallScreen: function () { | |
83 | return window.matchMedia("screen and (max-width: 1023px)").matches; | |
84 | }, | |
85 | }, | |
86 | }; | |
87 | </script> |