4. Membuat Sidebar Menu dengan Syncfusion di Angular 12

 

    Hai Sobat Musafir, kali ini saya akan share tutorial bagaimana membuat sidebar menu dengan syncfusion di angular. Pada tutorial sebelumnya saya sudah share tutorial bagaimana cara Membuat form Login dan Registrasi dengan Syncfusion di Angular. Jika belum mengikuti, silahkan ikuti tutorialnya dari awal karena akan saling berkaitan. Untuk daftar tutorialnya bisa lihat disini.

Cara Membuat Sidebar Menu di Angular

    Untuk membuat sidebar menu dengan syncfusion di angular silahkan kalian ikuti tahapannya di bawah ini:

1. Instalasi Tools Syncfusion Navigations

    Pertama-tama kalian harus instal tools/module navigations dari syncfusion. Untuk dokumentasinya bisa kalian kunjungi di web nya disini. cara instalasinya adalah dengan kode berikut, kalian pastekan ke dalam terminal kalian. Sebelumnya kalian harus masuk ke folder aplikasi kalian.

npm install @syncfusion/ej2-angular-navigations --save

Tunggu hingga proses instalasinya selesai.

Setelah selesai, kalian pastekan kode dibawah ini ke dalam file styles.scss

@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';

gunanya untuk memanggil style class bawaan syncfusion agar bisa digunakan.

2. Buat Module admin dan Component (menu dan dashboard)

    Langkah kedua kalian buat module admin di aplikasi angular kalian. Gunanya untuk memisahkan antara module app dengan module admin. Nantinya sidebar menu dan tampilan aplikasi yang lain akan masuk ke dalam module admin. Sementara untuk modul app hanya untuk menangani form login dan registrasi saja. Untuk membuat module admin caranya adalah sebagai berikut:

ng generate module admin

Setelah membuat module admin, kalian buatlah component menu dan dashboard. Gunanya untuk membuat kode sidebar menu dan tampilan awal dashboard. caranya adalah sebagai berikut :

ng generate component admin/menu
ng generate component admin/dashboard

component menu dan dashboard berada di dalam folder admin. tampilan struktur file nya akan menjadi seperti ini :

3. Import Module dan Membuat Routing di admin.module.ts

    Langkah ketiga kalian import beberapa modul dari syncfusion ke dalam file admin.module.ts agar tools syncfusion dapat digunakan. Kemudian kalian juga harus membuat routing di dalam admin.module.ts. Gunanya untuk membuat rute link di dalam browser. Untuk tampilan kode nya seperti ini, silahkan kalian pastekan semua kode nya:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenuComponent } from './menu/menu.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MenuAllModule, SidebarAllModule } from '@syncfusion/ej2-angular-navigations';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path:'',
    component: MenuComponent,
    children:[
      {
        path:'',
        redirectTo:'dashboard',
        pathMatch:'full'
      },
      {
        path:'dashboard',
        component:DashboardComponent
      }
    ]
  }
];

@NgModule({
  declarations: [
    MenuComponent,
    DashboardComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    SidebarAllModule,
    MenuAllModule,
    RouterModule
  ]
})
export class AdminModule { }

4. Membuat Tampilan Sidebar Menu di menu.component.html

    Langkah berikutnya kalian pastekan source code ini ke dalam file menu.component.html. Gunanya untuk menampilkan layout sidebar menu.

<div class="control-section">
	<div class="col-lg-12 col-sm-12 col-md-12" id="sidebar-section">
		<div id="wrapper">
            <div class="header-section dock-menu" id="header">
                <ul class="header-list">
                    <li id="hamburger" class="icon-menu icon list" (click)="openClick()"></li>
                    <li class="left-header list">
                        ANGULAR SYSTEM WITH SYNCFUSION
                    </li>
                    <li class="right-header list">
                        <div class="horizontal-menu">
                            <!-- Menu element declaration -->
                            <ejs-menu [items]='AccountMenuItem' cssClass='dock-menu'></ejs-menu>
                        </div>
                    </li>
                </ul>
            </div>
            <!--end of header-section  declaration -->
            <!-- sidebar element declaration -->
            <ejs-sidebar id="sidebar-menu" class="dock-menu" #sidebarMenuInstance  [width]='width'
                [dockSize]='dockSize' [mediaQuery]='mediaQuery' [target]='target' >
                <div class="main-menu">
                    <p class="main-menu-header">MAIN</p>
                    <!-- Menu element declaration -->
                    <ejs-menu [items]='menuItems' orientation='Vertical' cssClass='dock-menu' [animationSettings]='animationSettings'>
                        <ng-template #template let-menuItems=""> 
                            <div *ngIf="menuItems.text" routerLink="{{menuItems.url}}" style="width:100%;display:flex;justify-content:space-between;">
                                <span class="{{menuItems.iconCss}}"></span>
                                <span class="navRes" style="width:100%;">
                                    <a style="display:block" class="e-menu-text e-menu-url" style="color:white; margin-left:10px;"> 
                                        {{ menuItems.text }} 
                                    </a> 
                                </span>
                            </div>
                        </ng-template> 
                    </ejs-menu>
                </div>
            </ejs-sidebar>

            <div class="main-content" id="maintext">
                <div class="sidebar-menu-content">
                    <router-outlet></router-outlet>
                </div>
            </div>
            <div></div>
        </div>
    </div>
</div>

5. Membuat CSS di menu.component.scss

    Langkah berikutnya pastekan kode css ini ke dalam file menu.component.scss agar tampilan sidebar menjadi lebih bagus.

/* header-section styles */

#header.header-section,
#header .search-icon {
    height: 63px;
}

#header #hamburger.icon-menu {
    font-size: 24px;
    float: left;
    line-height: 50px;
}

#header .left-header {
    height: 50px;
    padding: 7px;
    float: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
}

#header .right-header {
    height: 50px;
    padding: 7px;
    float: right;
}

#header .list {
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 35px;
}

#header .header-list {
    padding-left: 1px;
    margin: 0;
}

@media(max-width:500px) {
	 #header .right-header.list.support,
     #header .right-header.list.tour {
         display: none;
     }
 }

/* text input styles */
#header .search-icon {
    float: left;
    padding-left: 15px;
    border: 0px solid #33383e !important;
    background-color: #33383e;
    cursor: text;
    width: 5em;
}

#header .search-icon:focus {
    outline: none;
    cursor: default;
}

/* end of text input styles */
/* end of header-section styles */


/* menu styles */
/* horizontal-menu styles */
#header .header-list .horizontal-menu .e-menu-item {
    height: 35px;
    vertical-align: middle;
    font-size: 16px;
    line-height: 35px;
}

#header .e-menu-item .e-caret {
    line-height: 35px;
}

/* end of horizontal-menu styles */
/* vertical-menu styles */

#sidebar-menu .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon {
    width: 210px;
}

@media(max-width: 500px) {

    #header .right-header.list.support,
    #header .right-header.list.tour {
        display: none;
    }
 }

#sidebar-menu .e-menu-wrapper ul .e-menu-item:hover,
.e-menu-item.e-focused:hover {
    background-color: #9ca707 !important;
}

/* end of vertical-menu styles */
/* end of menu styles */

/* Sidebar styles */
/* docksidebar styles */
.dock-menu .e-menu-wrapper ul .e-menu-item .e-caret,
#header .search-icon,
#sidebar-menu .action-btn,
#header .e-menu-item .e-caret,
.dock-menu .e-menu-wrapper ul .e-menu-item {
    color: #fff !important;

}

.dock-menu.e-close .e-menu-wrapper ul .e-menu-item {
    width: 50px;
}

.dock-menu.e-close ul .e-menu-item.e-menu-caret-icon {
    padding-right: 12px;
}

#sidebar-menu.e-dock.e-close .e-menu-wrapper ul .e-menu-item .e-caret,
#sidebar-menu.e-dock.e-close .main-menu-header,
#sidebar-menu.e-dock.e-close .action-btn {
    display: none;
}

#sidebar-menu.e-dock.e-close .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
#sidebar-menu.e-dock.e-close .e-menu-wrapper ul.e-vertical {
    min-width: 0;
    width: 50px !important;
}

#sidebar-menu.e-dock.e-close .e-menu-wrapper ul.e-menu {
    font-size: 0px;
}

#sidebar-menu.e-dock.e-close .e-menu-item .e-menu-icon {
    font-size: 20px;
    padding: 0;
}

#sidebar-menu,
#sidebar-menu ul,
#header ul,
.dock-menu .e-menu-wrapper,
.dock-menu.e-menu-wrapper,
.dock-menu.e-menu-wrapper ul>*,
.dock-menu .e-menu-wrapper ul>* {
    background-color: #5650b1 !important;
    color: #fff !important;
    overflow: hidden;
}

#sidebar-menu {
    position: fixed;
    margin-top: 63px;
    margin-left: -1px;
    overflow-y: auto;
}

/* end of docksidebar styles */
/*end of  Sidebar styles */

/*main-menu-header  styles */
#sidebar-menu .main-menu-header {
    padding: 4px 0 0 18px;
    color: #cfd2d4;
    background-color: #054894;
    margin-top: 0px;
    height: auto;
}

#sidebar-menu .main-menu {
    margin-bottom: 100px;
}

/*end of main-menu-header  styles */

/*button styles */
#sidebar-menu .action-btn {
    margin-left: 16px;
    width: 165px;
    height: 30px;
    font-size: 13px;
    border-radius: 5px;
}

#sidebar-menu .action-btn {
    background-color: #1784c7;
}
/* custom code start */
/*end of button styles */
.sb-content-tab #wrapper {
    display: none;
}

.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}

.sb-content-tab .center {
    display: block;
}

/*body styles */
body {
    margin: 0;
    overflow-y: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
/* custom code end */
/*end of body styles */

/* newTab support styles */

.ej2-new .sb-header,
.ej2-new .sb-bread-crumb,
.ej2-new #action-description,
.ej2-new #description-section,
.ej2-new #description,
.ej2-new .action {
    display: none
}

.ej2-new .control-section{
	padding-left: 0px;
}

.ej2-new app-root > div:first-child{
	padding-left: 0px !important;
}

.ej2-new .container-fluid,
.ej2-new .container-fluid .control-section,
#sidebar-section {
    padding: 0;
}

.ej2-new .sample-browser>.content.e-view {
    top: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    text-align: initial
}

/* end of newTab support styles */

/*icon styles */
@font-face {
    font-family: 'fontello';
    src:url('data:application/octet-stream;base64,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') format('truetype');
}

#sidebar-menu .icon-up-hand:before {
    content: '\e801';
}

#sidebar-menu .icon-bell-alt:before {
    content: '\e802';
}

#sidebar-menu .icon-user:before {
    content: '\e803';
}

#sidebar-menu .icon-picture:before {
    content: '\e804';
}

#sidebar-menu .icon-account-circle:before {
    content: '\e803';
}

#sidebar-menu .icon-comment-alt:before {
    content: '\e805';
}

#sidebar-menu .icon-tag:before {
    content: '\e806';
}

#sidebar-menu .icon-comment-inv-alt2:before {
    content: '\e807';
}

#sidebar-menu .icon-eye:before {
    content: '\e808';
}

#sidebar-menu .icon-globe:before {
    content: '\e809';
}

#sidebar-menu .icon-bookmark-empty:before {
    content: '\e810';
}

#sidebar-menu .icon-bookmark:before {
    content: '\e811';
}

#header .icon-menu:before {
    content: '\e812';
}

#sidebar-menu .icon,
#header #hamburger.icon-menu {
    font-family: 'fontello';
}

#sidebar-menu .e-menu-icon::before {
    color: #656a70;
}

/*icon styles */


.content {
    align-content: center;
    padding: 10px;
  }
  
  .sub-title {
    text-align: center;
    font-size: 16px;
    padding: 10px;
  }

#maintext.main-content {
    height: 100vh;
    z-index: 1000;
    margin-left: 10px;
    margin-right: 10px;
}

#maintext .sidebar-menu-content {
    margin-top: 10px;
    text-align: left;
    margin-bottom: 100px;
}

6. Membuat Source Code Typescript di menu.component.ts

    Selanjutnya kalian pastekan kode dibawah ini ke dalam file menu.component.ts.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

import { MenuAnimationSettingsModel, MenuItemModel, SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],

  encapsulation: ViewEncapsulation.None
})
export class MenuComponent {
    @ViewChild('sidebarMenuInstance')
    public sidebarMenuInstance!: SidebarComponent;
    public width: string = '220px';
    public mediaQuery: string = ('(min-width: 600px)');
    public target: string = '.main-content';
    public dockSize: string = '50px';
    public enableDock: boolean = true;
    public animationSettings: MenuAnimationSettingsModel = {
        effect: 'SlideDown',
        duration: 1000
    }

    public menuItems: MenuItemModel[] = [
        {
            text: 'Dashboard',
            iconCss: 'icon-globe icon',
            url: '/admin'
        },
        {
            text: 'Example',
            iconCss: 'icon-bell-alt icon',
            url: '#',
            items: [
                { text: 'Message', url: '#' },
                { text: 'Facebook', url: '#' },
                { text: 'Twitter', url: '#' }
            ]
        },
    ];
     public AccountMenuItem: MenuItemModel[] = [
        {
            text: 'Account',
            items: [
                { text: 'Profile' },
                { text: 'Sign out', url:'/login' },
            ]
        }
    ];
    // open new tab
    newTabClick(): void {
        let URL = location.href.replace(location.search,'');
    }

    openClick() {
        this.sidebarMenuInstance.toggle();
    }

}

7. Membuat Tampilan Dashboard di dashboard.component.html

    Langkah terakhir kalian buat tampilan menu dashboardnya dengan kode berikut ini.

<div tabindex="0" class="e-card" id="basic" >
    <div class="e-card-header" style="width:100%;">
        <div class="e-card-header-caption">
            <div class="e-card-title">
                <h1 style="color:blue; font-weight: bold;">
                Welcome to Angular System
                </h1>
            </div>
        </div>
    </div>
</div>

8. Menambah Routing di file app-routing.module.ts

    Menambah routing pada file app-routing.module.ts agar bisa redirect ke modul admin. Untuk source code nya akan menjadi seperti ini :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login/login.component';
import { RegistrasiComponent } from './auth/registrasi/registrasi.component';

const routes: Routes = [
  {
    path :'',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path :'login',
    component :LoginComponent
  },
  {
    path :'registrasi',
    component :RegistrasiComponent
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(mod => mod.AdminModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

silahkan tambahkan baris code yang berwarna kuning..

simpan semua perubahan file nya. buka browser dengan url localhost:4200/admin.

Jika berhasil tampilanya akan seperti ini dibrowser

Cukup sekian tutorial kali ini. tetap semangat belajar dan sampai jumpa di tutorial berikutnya..

#angular #syncfusion #sidebar #navigations