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           <a
   7             role="button"
   8             aria-label="menu"
   9             aria-expanded="false"
  10             class="navbar-burger"
  11             :class="{ 'is-active': showMenu }"
  12             v-on:click="$emit('navbar-toggle')"
  13           >
  14             <span aria-hidden="true"></span>
  15             <span aria-hidden="true"></span>
  16             <span aria-hidden="true"></span>
  17           </a>
  18         </div>
  19         <div class="navbar-menu" :class="{ 'is-active': showMenu }">
  20           <div class="navbar-start">
  21             <a
  22               class="navbar-item"
  23               rel="noreferrer"
  24               v-for="(link, key) in links"
  25               :key="key"
  26               :href="link.url"
  27               :target="link.target"
  28             >
  29               <i
  30                 v-if="link.icon"
  31                 :class="['fa-fw', link.icon, { 'mr-2': link.name }]"
  32               ></i>
  33               {{ link.name }}
  34             </a>
  35           </div>
  36           <div class="navbar-end">
  37             <slot></slot>
  38           </div>
  39         </div>
  40       </div>
  41     </nav>
  42   </div>
  43 </template>
  44
  45 <script>
  46 export default {
  47   name: "Navbar",
  48   props: {
  49     open: {
  50       type: Boolean,
  51       default: false,
  52     },
  53     links: Array,
  54   },
  55   computed: {
  56     showMenu: function () {
  57       return this.open && this.isSmallScreen();
  58     },
  59   },
  60   methods: {
  61     isSmallScreen: function () {
  62       return window.matchMedia("screen and (max-width: 1023px)").matches;
  63     },
  64   },
  65 };
  66 </script>