src/components/Navbar.vue

   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">
   6           <SearchInput
   7             class="search-bar search-bar-mobile is-hidden-desktop"
   8             @input="filterServices"
   9             @search:open="navigateToFirstService"
  10             @search:cancel="filterServices"
  11           />
  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"
  29               rel="noreferrer"
  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>
  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             />
  52           </div>
  53         </div>
  54       </div>
  55     </nav>
  56   </div>
  57 </template>
  58
  59 <script>
  60 import SearchInput from "./SearchInput.vue";
  61
  62 export default {
  63   name: "Navbar",
  64   components: {
  65     SearchInput,
  66   },
  67   props: {
  68     open: {
  69       type: Boolean,
  70       default: false,
  71     },
  72     links: Array,
  73     navigateToFirstService: { type: Function },
  74     filterServices: { type: Function },
  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>