fix: header

components/templates/TheHeader.vue

@@ -0,0 +1,83 @@
+<template>
+  <b-navbar>
+    <template #brand>
+      <b-navbar-item tag="router-link" :to="{ path: '/' }">
+        <img
+          src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
+          alt="Lightweight UI components for Vue.js based on Bulma"
+        >
+      </b-navbar-item>
+    </template>
+    <template #start>
+      <template v-for="(nav, index) in navbarItems">
+        <b-navbar-item
+          v-if="nav.subMenu.length === 0"
+          :key="index"
+          :href="nav.link"
+        >
+          {{ nav.title }}
+        </b-navbar-item>
+        <b-navbar-dropdown
+          v-else
+          :key="index"
+          :label="nav.title"
+        >
+          <b-navbar-item
+            v-for="(sub, i) in nav.subMenu"
+            :key="i"
+            :href="sub.link"
+          >
+            {{ sub.title }}
+          </b-navbar-item>
+        </b-navbar-dropdown>
+      </template>
+    </template>
+
+    <template #end>
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <a class="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a class="button is-light">
+            Log in
+          </a>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class TheHeader extends Vue {
+  navbarItems = [
+    {
+      title: 'Trang chu',
+      link: '/',
+      subMenu: []
+    },
+    {
+      title: 'Khoa hoc',
+      link: '/',
+      subMenu: []
+    },
+    {
+      title: 'Ve chung toi',
+      link: '/',
+      subMenu: [
+        {
+          title: 'sub 1',
+          link: '/'
+        },
+        {
+          title: 'Sub 2',
+          link: '/'
+        }
+      ]
+    }
+  ]
+}
+</script>

layouts/default.vue

@@ -1,74 +1,18 @@
 <template>
   <div>
-    <nav
-      class="navbar header has-shadow is-primary"
-      role="navigation"
-      aria-label="main navigation"
-    >
-      <div class="navbar-brand">
-        <a
-          class="navbar-item"
-          href="/"
-        >
-          <img
-            src="~assets/buefy.png"
-            alt="Buefy"
-            height="28"
-          >
-        </a>
-
-        <div class="navbar-burger">
-          <span />
-          <span />
-          <span />
-        </div>
-      </div>
-    </nav>
-
-    <section class="main-content columns">
-      <aside class="column is-2 section">
-        <p class="menu-label is-hidden-touch">
-          General
-        </p>
-        <ul class="menu-list">
-          <li
-            v-for="(item, key) of items"
-            :key="key"
-          >
-            <nuxt-link
-              :to="item.to"
-              exact-active-class="is-active"
-            >
-              <b-icon :icon="item.icon" /> {{ item.title }}
-            </nuxt-link>
-          </li>
-        </ul>
-      </aside>
-
-      <div class="container column is-10">
-        <nuxt />
-      </div>
-    </section>
+    <the-header />
+    <nuxt />
   </div>
 </template>
 
 <script>
-export default {
-  data () {
-    return {
-      items: [
-        {
-          title: 'Home',
-          icon: 'home',
-          to: { name: 'index' }
-        },
-        {
-          title: 'Inspire',
-          icon: 'lightbulb',
-          to: { name: 'inspire' }
-        }
-      ]
-    }
+import { Vue, Component } from 'nuxt-property-decorator'
+import TheHeader from '@/components/templates/TheHeader'
+
+@Component({
+  components: {
+    TheHeader
   }
-}
+})
+export default class DefaultLayout extends Vue {}
 </script>

pages/index.vue

@@ -1,53 +1,12 @@
 <template>
-  <section class="section">
-    <div class="columns is-mobile">
-      <card
-        title="Free"
-        icon="github"
-      >
-        Open source on <a href="https://github.com/buefy/buefy">
-          GitHub
-        </a>
-      </card>
+  <div>
 
-      <card
-        title="Responsive"
-        icon="cellphone-link"
-      >
-        <b class="has-text-grey">
-          Every
-        </b> component is responsive
-      </card>
-
-      <card
-        title="Modern"
-        icon="alert-decagram"
-      >
-        Built with <a href="https://vuejs.org/">
-          Vue.js
-        </a> and <a href="http://bulma.io/">
-          Bulma
-        </a>
-      </card>
-
-      <card
-        title="Lightweight"
-        icon="arrange-bring-to-front"
-      >
-        No other internal dependency
-      </card>
-    </div>
-  </section>
+  </div>
 </template>
 
 <script>
-import Card from '~/components/Card'
 
 export default {
-  name: 'HomePage',
-
-  components: {
-    Card
-  }
+  name: 'HomePage'
 }
 </script>