Membuat Blog dengan Laravel & VueJS - #19 | Menu Homepage

Kita akan lanjutkan dan masih mengerjakan bagian yang perlu dibuat pada halaman homepage.

Yang akan kita kerjakan pada part ini adalah membuat komponen untuk bagian sidebar untuk diberi menu blog.

Membuat Komponen

Langkah pertama yang kita kerjakan adalah membuat komponen baru untuk menu pada halaman homepage / index blog.

Mari kita buat file komponen pada direktori components dengan nama Menuhomepage.vue, lalu silahkan copas template dibawah ini.

//Menuhomepage.vue
<template>
<div>
  <nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-brand">
        <a href="/">Teluk Coding</a>
        <div id="close-sidebar">
          <i class="fas fa-arrow-left"></i>
        </div>
      </div>
      <div class="sidebar-header">
        <div class="user-pic"> 
          <img :src="'/images/myprofile/profile.jpg'" class="img-responsive img-rounded" alt="my profile">
        </div>
        <div class="user-info">
          <span class="user-name">Welcome to my blog. 
          </span>
          <span class="user-role">@telukcoding</span>
        </div>
      </div>

      <div class="sidebar-search">
        <div>
          <div class="input-group">
            <input type="text" class="form-control search-menu" placeholder="Search...">
            <div class="input-group-append">
              <span class="input-group-text">
                <i class="fa fa-search" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="sidebar-menu">
        <ul>
          <li class="header-menu">
            <span>Menu</span>
          </li>
          <li>
           <router-link :to="{ name: 'homepageposts' }">
                 <i class="fa fa-book " aria-hidden="true"></i>
                  <span>Blog</span> 
            </router-link> 
          </li>
          <li> 
            <a href="#">
              <i class="fa fa-book " aria-hidden="true"></i>
                <span>About</span> 
            </a>
          </li>
          <li class="sidebar-dropdown">
            <a href="#">
              <i class="fa fa-book"></i>
              <span>Other</span>
            </a>
            <div class="sidebar-submenu">
              <ul>
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Link</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div> 
    </div> 
  </nav>
</div>
</template>

Kemudian buka file app.js untuk kita import dan mendaftarkan komponen.

//app.js
import Menuhomepage from './components/Menuhomepage'

Lalu daftarkan pada properti components.

//app.js
const app = new Vue({
    el: '#app',
    router,
    components: { Menuadmin, Menuhomepage }
});

Menuhomepage ini kita buat dengan metode local components sama seperti Menuadmin pada halaman admin yang didaftarkan secara global.

Setelah komponen diimport dan didaftarkan, kita buka homepage.blade.php untuk kita render.

//homepage.blade.php

 <!-- Menu Homepage-->
 <menuhomepage> </menuhomepage>

Selanjutnya mari kita lihat hasilnya. Jika tidak ada kesalahan maka akan terlihat seperti gambar dibawah ini.

Urutan part / bagian dari tutorial ini bisa dilihat pada: Tutorial Membuat Blog Menggunakan Laravel-Vue.js.