Cara membuat template side menu pada ionic

Dalam artikel saya sebelumnya saya membahas beberapa fitur bawaan ionic yang bisa kita gunakan untuk memudahkan untuk membuat template aplikasi kita. Tutorial sebelumnya membahas tentang "Membuat aplikasi dengan template tabs di Ionic". Setelah template tersebut, mari kita lanjutkan dengan membahas template selanjutnya yaitu side menu. Side menu ini merupakan salah satu bagian yang sering kita gunakan dalam membuat aplikasi.

Untuk memudahkan tutorial kali ini, seperti biasa, langsung saja kita lakukan persiapan mendasar.

ionic start mySideMenu sidemenu
cd mySideMenu
ionic platform add android

Setelah semua persiapan beres, kita buka text editor kita dan buka pada file menu.html pada directory www/templates/menu.html. Silahkan masukan code berikut ini:

<ion-side-menus enable-menu-with-back-views="false">
 <ion-side-menu-content>
  <ion-nav-bar class="bar-balanced">
   <ion-nav-back-button>
   </ion-nav-back-button>

   <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
   </ion-nav-buttons>
  </ion-nav-bar>
  <ion-nav-view name="menuContent"></ion-nav-view>
 </ion-side-menu-content>

 <ion-side-menu side="left">
  <ion-header-bar class="bar-royal">
   <h1 class="title">Left</h1>
  </ion-header-bar>
  <ion-content>
   <ion-list>
    <ion-item menu-close="" ng-click="login()">
     Login
    </ion-item>
    <ion-item href="#/app/search" menu-close="">
     Search
    </ion-item>
    <ion-item href="#/app/browse" menu-close="">
     Browse
    </ion-item>
    <ion-item href="#/app/playlists" menu-close="">
     Playlists
    </ion-item>
   </ion-list>
  </ion-content>
 </ion-side-menu>
</ion-side-menus>

Pada file tersebut, kita dapat menyesuaikan content apa saja atau menu apa saja yang akan kita tampilkan pada side menu.

Selanjutnya untuk mengisi setiap page pada menu yang kita buat, kita bisa memasukkany pada setiap file yang tersedia pada directory www/templates. Kali ini saya hanya akan mengubah content yang tersedia pada file serach.html. silahkan masukkan code berikut ini untuk memudahkan perubahan content pada page serach.

<ion-view view-title="Search">
 <ion-content class="padding">
  <h4>Ini adalah halaman Search</h4> Pada bagian ini anda bisa mengganti content sesuai dengan apa yang anda perlukan.<br />

  <div class="spacer" style="height: 40px;">
  </div>
  <button class="button button-positive button-block">Done</button>
 </ion-content>
</ion-view>

Setelah selesai, jadilah template sidemenu yang kita perlukan. kita tinggal menambahkan atau menghapus content sehingga aplikasi yang kita buat sesuai dengan apa yang kita inginkan. Demikian semoga bermanfaat.