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 in links"
  25               :key="link.url"
  26               :href="link.url"
  27               :target="link.target"
  28             >
  29               <i
  30                 v-if="link.icon"
  31                 style="margin-right: 6px;"
  32                 :class="link.icon"
  33               ></i>
  34               {{ link.name }}
  35             </a>
  36           </div>
  37           <div class="navbar-end">
  38             <slot></slot>
  39           </div>
  40         </div>
  41       </div>
  42     </nav>
  43   </div>
  44 </template>
  45
  46 <script>
  47 export default {
  48   name: "Navbar",
  49   props: {
  50     open: {
  51       type: Boolean,
  52       default: false,
  53     },
  54     links: Array,
  55   },
  56   computed: {
  57     showMenu: function () {
  58       return this.open && this.isSmallScreen();
  59     },
  60   },
  61   methods: {
  62     isSmallScreen: function () {
  63       return window.matchMedia("screen and (max-width: 1023px)").matches;
  64     },
  65   },
  66 };
  67 </script>