From f79c2f5031b3e4c99cd5e43013d7e0b7cb65d2d5 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Mon, 28 Jun 2021 00:12:53 +0700
Subject: [PATCH] fix: collapse header mobile

---
 components/templates/TheHeader.vue            |  7 +++
 .../templates/contact-us/ContactForm.vue      |  1 +
 .../templates/contact-us/FormContact.vue      | 13 ++++++
 components/templates/home/Banner.vue          | 44 +++++++++++++++++++
 pages/contact-us.vue                          | 13 ++++++
 pages/index.vue                               | 12 +++--
 6 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 components/templates/contact-us/ContactForm.vue
 create mode 100644 components/templates/contact-us/FormContact.vue
 create mode 100644 components/templates/home/Banner.vue
 create mode 100644 pages/contact-us.vue

diff --git a/components/templates/TheHeader.vue b/components/templates/TheHeader.vue
index 0fff5d0..03316ee 100644
--- a/components/templates/TheHeader.vue
+++ b/components/templates/TheHeader.vue
@@ -22,6 +22,7 @@
           v-else
           :key="index"
           :label="nav.title"
+          collapsible
         >
           <b-navbar-item
             v-for="(sub, i) in nav.subMenu"
@@ -104,7 +105,13 @@ export default class TheHeader extends Vue {
           link: '/'
         }
       ]
+    },
+    {
+      title: 'Contact Us',
+      link: '/contact-us',
+      subMenu: []
     }
+
   ]
 }
 </script>
diff --git a/components/templates/contact-us/ContactForm.vue b/components/templates/contact-us/ContactForm.vue
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/components/templates/contact-us/ContactForm.vue
@@ -0,0 +1 @@
+
diff --git a/components/templates/contact-us/FormContact.vue b/components/templates/contact-us/FormContact.vue
new file mode 100644
index 0000000..a5afba8
--- /dev/null
+++ b/components/templates/contact-us/FormContact.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="hero is-fullheight">
+   sdsdfsd
+  </section>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class ContactForm extends Vue {
+}
+</script>
diff --git a/components/templates/home/Banner.vue b/components/templates/home/Banner.vue
new file mode 100644
index 0000000..6eff0e8
--- /dev/null
+++ b/components/templates/home/Banner.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <div class="columns is-vcentered">
+        <div class="column is-5">
+          <figure class="image is-5by3">
+            <img
+              class="main-image"
+              src="~assets/images/logo.png"
+              alt="Description"
+            >
+          </figure>
+        </div>
+        <div class="column is-6 is-offset-1">
+          <h1 class="title is-2">
+            Superhero Scaffolding
+          </h1>
+          <h2 class="subtitle is-4">
+            Let this cover page describe a product or service.
+          </h2>
+          <br>
+          <p class="has-text-centered">
+            <a class="button is-medium is-info is-outlined">
+              Learn more
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class Banner extends Vue {
+
+}
+</script>
+<style scoped>
+.main-image {
+  min-width: 300px;
+}
+</style>
diff --git a/pages/contact-us.vue b/pages/contact-us.vue
new file mode 100644
index 0000000..524a010
--- /dev/null
+++ b/pages/contact-us.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Contact
+  </div>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class ContactUs extends Vue {
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index b482709..3548504 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,18 @@
 <template>
   <div>
-
+    <banner />
   </div>
 </template>
 
 <script>
+import { Vue, Component } from 'nuxt-property-decorator'
+import Banner from '@/components/templates/home/Banner'
 
-export default {
-  name: 'HomePage'
+@Component({
+  components: {
+    Banner
+  }
+})
+export default class Index extends Vue {
 }
 </script>