Ionic – Side Menu
Table of Contents
Code
page.html
TITLE
app.component.html
Name
Title
Add Product
{{ nav.name }}
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})
}
}