src/app/menu/menu.page.ts
| selector | app-menu |
| styleUrls | ./menu.page.scss |
| templateUrl | ./menu.page.html |
Properties |
Methods |
constructor(router: Router, afa: AngularFireAuth, loadingController: LoadingController)
|
||||||||||||
|
Defined in src/app/menu/menu.page.ts:20
|
||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/menu/menu.page.ts:49
|
|
Returns :
void
|
| isSelectedPath |
Default value : () => {...}
|
|
Defined in src/app/menu/menu.page.ts:37
|
| logOutUser |
Default value : () => {...}
|
|
Defined in src/app/menu/menu.page.ts:53
|
| movePage |
Default value : () => {...}
|
|
Defined in src/app/menu/menu.page.ts:45
|
| moveToHomePage |
Default value : () => {...}
|
|
Defined in src/app/menu/menu.page.ts:41
|
| pages |
Type : []
|
Default value : [
{ title: 'Search Book', url: 'booksearch' },
{ title: 'Book transfer', url: 'transfer' },
{ title: 'Feedback', url: 'feedback' },
{ title: 'Request Book', url: 'requestbook' },
{ title: 'Account', url: 'account' }
]
|
|
Defined in src/app/menu/menu.page.ts:12
|
| selectedPath |
Type : string
|
Default value : ''
|
|
Defined in src/app/menu/menu.page.ts:20
|
| subscribeToRouterEvents |
Default value : () => {...}
|
|
Defined in src/app/menu/menu.page.ts:28
|
| width |
Default value : window.innerWidth
|
|
Defined in src/app/menu/menu.page.ts:19
|
import { LoadingController } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';
@Component({
selector: 'app-menu',
templateUrl: './menu.page.html',
styleUrls: ['./menu.page.scss']
})
export class MenuPage implements OnInit {
pages = [
{ title: 'Search Book', url: 'booksearch' },
{ title: 'Book transfer', url: 'transfer' },
{ title: 'Feedback', url: 'feedback' },
{ title: 'Request Book', url: 'requestbook' },
{ title: 'Account', url: 'account' }
];
width = window.innerWidth;
selectedPath = '';
constructor(
private router: Router,
private afa: AngularFireAuth,
private loadingController: LoadingController
) {}
subscribeToRouterEvents = () => {
this.router.events.subscribe((event: RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
console.log('event.url', event.url);
}
});
};
isSelectedPath = url => {
return this.selectedPath.indexOf(url) >= 0;
};
moveToHomePage = () => {
this.router.navigateByUrl('/home');
};
movePage = page => {
this.router.navigateByUrl(`/menu/${page}`);
};
ngOnInit() {
this.subscribeToRouterEvents();
}
logOutUser = async () => {
const loading = await this.loadingController.create({
message: 'Please wait logging out...',
spinner: 'crescent'
});
loading.present();
this.afa.auth
.signOut()
.then(() => {
console.log('Successfully Logged out');
this.router.navigateByUrl('login');
})
.catch(error => {
console.log('Error occured while logging out');
console.error(error);
})
.finally(() => {
loading.dismiss();
});
};
}
<ion-split-pane>
<ion-menu contentId="content" class="menu">
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-menu-toggle>
<ion-button class="quick-buttons" routerLink="home" routerDirection="root">
<ion-icon name="home" slot="icon-only"></ion-icon>
</ion-button>
<ion-button class="quick-buttons" routerLink="info" routerDirection="root">
<ion-icon name="information-circle-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-menu-toggle>
<span *ngIf="width > 1000">
<ion-button class="quick-buttons" routerLink="home" routerDirection="root">
<ion-icon name="home"></ion-icon>
</ion-button>
<ion-button class="quick-buttons" routerLink="info" routerDirection="root">
<ion-icon name="information-circle-outline"></ion-icon>
</ion-button>
</span>
</ion-buttons>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item
(click)="movePage(p.url)"
routerDirection="root"
[class.active-item]="isSelectedPath(p.url)"
>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
<ion-footer style="background-color:#fe5200 ">
<ion-item (click)="logOutUser()">
<ion-icon name="log-out" slot="start"></ion-icon>Logout</ion-item
>
</ion-footer>
</ion-menu>
<ion-router-outlet id="content" main> </ion-router-outlet>
</ion-split-pane>
./menu.page.scss
.active-item {
border-left: 8px solid var(--ion-color-primary);
}
.quick-buttons {
border: 1px solid #056571;
border-radius: 5px;
}
ion-toolbar {
--background: #056571;
color: white;
}
ion-footer {
--background: #056571;
}
ion-icon {
--color: white;
}
@media only screen and (min-width: 1024px) {
.menu {
max-width: 20%;
}
}