Skip to content

Commit 6289fa9

Browse files
yannbfyannbf
committed
finished material and right menu
1 parent bfe6103 commit 6289fa9

File tree

6 files changed

+42
-42
lines changed

6 files changed

+42
-42
lines changed

‎src/app/app.component.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,22 @@ export class MyApp {
2424
rootPage: any = HomePage;
2525

2626
pages: Array<{ title: string, component: any, icon: string }>;
27-
icons: Array<string>;
27+
rightMenuItems: Array<{ icon: string, active: boolean }>;
2828
state: any;
2929

3030
constructor(public platform: Platform, public global: AppState) {
3131
this.initializeApp();
32-
this.icons = [
33-
'home', 'alarm', 'analytics', 'archive', 'basket', 'body', 'bookmarks', 'camera', 'beer', 'power'
32+
this.rightMenuItems = [
33+
{ icon: 'home', active: true },
34+
{ icon: 'alarm', active: false },
35+
{ icon: 'analytics', active: false },
36+
{ icon: 'archive', active: false },
37+
{ icon: 'basket', active: false },
38+
{ icon: 'body', active: false },
39+
{ icon: 'bookmarks', active: false },
40+
{ icon: 'camera', active: false },
41+
{ icon: 'beer', active: false },
42+
{ icon: 'power', active: false },
3443
]
3544

3645
this.pages = [
@@ -65,4 +74,9 @@ export class MyApp {
6574
// we wouldn't want the back button to show in this scenario
6675
this.nav.setRoot(page.component);
6776
}
77+
78+
rightMenuClick(item) {
79+
this.rightMenuItems.map(menuItem => menuItem.active = false);
80+
item.active = true;
81+
}
6882
}

‎src/app/app.html

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="{{global.state['theme']}}">
22
<!--Default Menu-->
3-
<ion-menu [content]="content" id="menu-components" class="animated-menu">
3+
<ion-menu [content]="content" id="menu-components">
44
<ion-header>
55
<ion-toolbar>
66
<ion-title>Menu</ion-title>
@@ -15,7 +15,7 @@
1515
</ion-content>
1616
</ion-menu>
1717
<!--Side Menu with avatar-->
18-
<ion-menu [content]="content" id="menu-avatar" class="animated-menu font-montserrat">
18+
<ion-menu [content]="content" id="menu-avatar">
1919
<ion-content>
2020
<div #header>
2121
<ion-row style="align-items:center;">
@@ -47,26 +47,25 @@ <h3>Paula Bolliger</h3>
4747
<ion-menu side="right" type="push" [content]="content" id="menu-right">
4848
<ion-content>
4949
<ion-list no-lines>
50-
<!--Here you should put a logic to make the item active and show the its active arrow-->
51-
<button menuClose icon-only ion-item detail-none *ngFor="let icon of icons; let i = index">
52-
<div *ngIf="i == 0" class="active-menu-item"></div>
53-
<ion-icon [name]="icon"></ion-icon>
50+
<button menuClose icon-only ion-item detail-none (click)="rightMenuClick(item)" *ngFor="let item of rightMenuItems; let i = index">
51+
<div *ngIf="item.active" class="active-menu-item"></div>
52+
<ion-icon [name]="item.icon"></ion-icon>
5453
</button>
5554
</ion-list>
5655
</ion-content>
5756
</ion-menu>
5857
<!--Material Design Menu-->
59-
<ion-menu [content]="content" id="menu-material" class="animated-menu">
60-
<ion-header class="menu-header">
61-
<!--material-design-background-->
62-
<img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
63-
/>
64-
<p class="name">Paula Bolliger</p>
65-
<p class="e-mail">pbolliger@email.com</p>
66-
</ion-header>
58+
<ion-menu [content]="content" id="menu-material">
6759
<ion-content>
60+
<ion-header class="menu-header">
61+
<!--material-design-background-->
62+
<img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
63+
/>
64+
<p class="name">Paula Bolliger</p>
65+
<p class="e-mail">pbolliger@email.com</p>
66+
</ion-header>
6867
<ion-list no-lines>
69-
<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
68+
<button menuClose="left" ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
7069
<ion-icon [name]="p.icon" item-left></ion-icon>
7170
{{p.title}}
7271
</button>

‎src/assets/fonts/Montserrat-Regular.ttf

-28.3 KB
Binary file not shown.

‎src/pages/side-menu/side-menu.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<ion-header>
22
<ion-navbar>
33
<ion-buttons left>
4-
<button ion-button icon-only menuToggle>
4+
<button ion-button icon-only menuToggle="left">
55
<ion-icon name="menu"></ion-icon>
66
</button>
77
</ion-buttons>
88
<ion-title>Side Menu</ion-title>
99
<ion-buttons right>
10-
<button ion-button icon-only (click)="toggleRightMenu()">
10+
<button ion-button icon-only menuToggle="right">
1111
<ion-icon name="home"></ion-icon>
1212
</button>
1313
</ion-buttons>
1414
</ion-navbar>
1515
</ion-header>
1616
<ion-content padding>
17+
<p>The home icon on the right is a small width sidemenu.</p>
1718
<button ion-button block color="secondary" (click)="changeMenu(MENU.DEFAULT)">Default sidemenu</button>
1819
<button ion-button block color="danger" (click)="changeMenu(MENU.AVATAR)">Sidemenu with avatar</button>
1920
<button ion-button block color="black" (click)="changeMenu(MENU.MATERIAL)">Material Design</button>

‎src/pages/side-menu/side-menu.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@ export class SideMenuPage {
99

1010
MENU = {
1111
DEFAULT: "menu-components",
12+
MATERIAL: "menu-material",
1213
AVATAR: "menu-avatar",
13-
MATERIAL: "menu-material"
1414
}
1515

1616
constructor(public navCtrl: NavController, public menuCtrl: MenuController) { }
1717

18-
ionViewDidLoad() {
18+
// Only enables right side menu for this page. Testing purposes.
19+
ionViewWillEnter() {
20+
this.menuCtrl.enable(true, "menu-right");
21+
}
22+
23+
ionViewWillLeave() {
24+
this.menuCtrl.enable(false, "menu-right");
1925
}
2026

2127
changeMenu(menu) {
@@ -26,9 +32,4 @@ export class SideMenuPage {
2632
this.menuCtrl.enable(true, menu);
2733
this.menuCtrl.open(menu);
2834
}
29-
30-
toggleRightMenu() {
31-
this.menuCtrl.open("menu-right");
32-
}
33-
3435
}

‎src/theme/variables.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,3 @@ $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4
4141
// --------------------------------------------------
4242
@import "roboto";
4343
@import "noto-sans";
44-
45-
/* Designed by Julieta Ulanovsky */
46-
47-
48-
/* FontFace Generated by FontPro */
49-
50-
@font-face {
51-
font-family: 'Montserrat-Regular';
52-
src: url('Montserrat-Regular.eot');
53-
src: url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('Montserrat-Regular.woff') format('woff'), url('Montserrat-Regular.ttf') format('truetype'), url('Montserrat-Regular.svg#Montserrat-Regular') format('svg');
54-
}
55-
56-
.font-montserrat {
57-
font-family: 'Montserrat-Regular', sans-serif;
58-
}

0 commit comments

Comments
 (0)