Ionic – Side Menu

Table of Contents

Code

page.html

				
					<ion-header="true">
  <ion-toolbar>
    <ion-title>
      TITLE
    </ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
				
			

app.component.html

				
					<ion-app>
  <ion-menu menuId="main-menu" contentId="main-content" side="start">
    <ion-content>
      <div class="menu-header-bg"></div>
      <div class="header-content">
        <img decoding="async" data-src="../assets/image/avatar.jpg" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" /><noscript><img decoding="async" src="../assets/image/avatar.jpg" alt="" /></noscript>
        <ion-label>
          <h2>Name</h2>
          <p>Title</p>
        </ion-label>
      </div>
      <div class="action-button">
        <ion-button>
          <ion-icon slot="start" name="add"></ion-icon>Add Product
        </ion-button>
      </div>

      <ion-menu-toggle auto-hide="false" *ngFor="let nav of NAV">
        <ion-list class="menu-items" lines="none">
          <ion-item
            routerDirection="root"
            [routerLink]="nav.link"
            [class.active-menu]="active === nav.link"
            [routerLinkActive]="['active']"
          >
            {{ nav.name }}
            <ion-icon
              slot="start"
              [ios]="nav.icon + '-outline'"
              [md]="nav.icon + '-sharp'"
            ></ion-icon>
          </ion-item>
        </ion-list>
      </ion-menu-toggle>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content" main></ion-router-outlet>
</ion-app>

				
			

app.component.scss

				
					.menu-header-bg {
  height: 180px;
  width: 350px;
  background: #fff;
  background: linear-gradient(
    90deg,
    rgb(98, 140, 255) 0%,
    rgb(35, 78, 194) 100%
  );
  box-shadow: 0px 1px 10px rgba(98, 140, 255, 0.5);
  transform: rotate(-15deg);
  border-radius: 10px 10px 10px 50px;
  margin-left: -18px;
  margin-top: -50px;
  margin-bottom: 60px;
}

.header-content {
  position: absolute;
  top: 30px;
  left: 15px;
  display: flex;
  align-items: center;

  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 7px solid rgb(153, 153, 255);
    margin-right: 14px;
  }

  h2 {
    font-weight: 300;
    color: rgb(255, 255, 255);
  }

  p {
    font-size: 12px;
    color: #e4e4e4;
    font-weight: 100;
    letter-spacing: 0.4px;
  }
}

.action-button {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  ion-button {
    text-transform: capitalize;
    font-weight: 300;
    --background: #628cff;
    --border-radius: 7px;
    --box-shadow: none;
  }

  ion-icon {
    margin-right: 1px;
  }
}

.menu-items {
  margin: 0px;

  ion-icon {
    margin-right: 20px;
    color: #86979f;
  }

  ion-item {
    padding-left: 20px;
    margin-bottom: 0px;
    text-transform: capitalize;
  }

  .active {
    border-left: 5px solid;
    color: #628cff;
    padding-left: 15px;
  }

  ion-icon {
    color: #628cff;
  }
}

				
			

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  active = '';

  NAV = [
    {
      name: 'home',
      link: 'home',
      icon: 'person-circle'
    },
    {
      name: 'item2',
      link: 'item2',
      icon: 'icon'
    },
    {
      name: 'item3',
      link: 'item3',
      icon: 'icon'
    }
  ]

  constructor(private router: Router, private menu: MenuController) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.active = event.url})
  }
  
}