Ionic material side bar

Question

I am trying recently Ionic framework and I want to implement a material design. I wan to do something like this

https://github.com/wasabeef/awesome-android-ui/blob/master/art/LDrawer.gif

Is that possible?

Many thanks.

Answer 1

Itt's totally possible, you only need to know some basic scss and HTML.

This is a side menu i created by myself

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {

  constructor(private menu: MenuController, public router: Router) { }

  ngOnInit() {}

  navigateToDashboard() {
    this.router.navigate(['tabs/tab1'])
    console.log("Directed to dashboard")

  }

  navigateToProjects() {
    this.router.navigate(['projectspage'])
    console.log("Directed to Projects")
  }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end');
  }

  openCustom() {
    this.menu.enable(true, 'custom');
    this.menu.open('custom');
  }
  
}

img {
  border-radius: 50%;
  border: 1px solid #ddd;
  padding: 5px;
  left: initial;
  width: 150px;
  margin-left: 60px;
}

ion-card{
  margin-bottom:10px;
  margin-top: 11px;
  position: relative;
  
}

ion-menu{
  --background: linear-gradient(to right, rgb(201, 75, 75), rgb(75, 19, 79));
//filter: blur(8px);
}

ion-button{
  margin-bottom: 7px;
}

div{
  margin-bottom: 31px;
}




.my-custom-menu {
    --width: 500px;
  }
  
  

<ion-menu side="start"  content-id="main-content" swipe-gesture="true">


  <ion-card color="transparent">
    <img src="../../../assets/img/avatar.jpg" alt="Avatar">
    <ion-card-header>
      <ion-card-subtitle>Role</ion-card-subtitle>
      <ion-card-title color="light">UserName</ion-card-title>
    </ion-card-header>
  </ion-card>

  <div>
    <ion-button expand="full" color="#7c46ce" (click)="navigateToDashboard()">
      <ion-icon name="reader-outline"></ion-icon> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dashboard
    </ion-button>

    <ion-button expand="full" color="#7c46ce">
      <ion-icon name="person-outline"></ion-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; My profile
    </ion-button>

    <ion-button expand="full" color="#7c46ce" (click)="navigateToProjects()">
      <ion-icon name="bar-chart-outline"></ion-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Projects
    </ion-button>

    <ion-button expand="full" color="#7c46ce">
      <ion-icon name="pie-chart-outline"></ion-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Statistics
    </ion-button>
  </div>


  <div>

    <ion-button expand="full" color="#7c46ce">
      <ion-icon name="construct-outline"></ion-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Settings
    </ion-button>

    <ion-button expand="full" color="#7c46ce">
      <ion-icon name="log-out-outline"></ion-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Logout
    </ion-button>
  </div>



</ion-menu>



<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button>
          <ion-icon name="menu"></ion-icon>
        </ion-menu-button>
      </ion-buttons>

    </ion-toolbar>
  </ion-header>

</div>

This is how it looks like