Skip to content

Commit bfe6103

Browse files
yannbfyannbf
committed
Adds material sidemenu WIP
1 parent 6b766d3 commit bfe6103

File tree

6 files changed

+67
-15
lines changed

6 files changed

+67
-15
lines changed

‎src/app/app.component.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class MyApp {
2323

2424
rootPage: any = HomePage;
2525

26-
pages: Array<{ title: string, component: any }>;
26+
pages: Array<{ title: string, component: any, icon: string }>;
2727
icons: Array<string>;
2828
state: any;
2929

@@ -34,18 +34,18 @@ export class MyApp {
3434
]
3535

3636
this.pages = [
37-
{ title: 'Home', component: HomePage },
38-
{ title: 'Ionic Official Components', component: IonicOfficialComponentsPage },
39-
{ title: 'Login', component: LoginListPage },
40-
{ title: 'Lists', component: ListsPage },
41-
{ title: 'Popup Modal', component: PopupModalsPage },
42-
{ title: 'Miscellaneous', component: MiscellaneousListPage },
43-
{ title: 'Popup Menu', component: PopupMenuListPage },
44-
{ title: 'Profile', component: ProfileListPage },
45-
{ title: 'Side Menu', component: SideMenuPage },
37+
{ title: 'Home', component: HomePage, icon: 'home' },
38+
{ title: 'Ionic Official Components', component: IonicOfficialComponentsPage, icon: 'alarm' },
39+
{ title: 'Login', component: LoginListPage, icon: 'archive' },
40+
{ title: 'Lists', component: ListsPage, icon: 'body' },
41+
{ title: 'Popup Modal', component: PopupModalsPage, icon: 'basket' },
42+
{ title: 'Miscellaneous', component: MiscellaneousListPage, icon: 'bookmarks' },
43+
{ title: 'Popup Menu', component: PopupMenuListPage, icon: 'beer' },
44+
{ title: 'Profile', component: ProfileListPage, icon: 'camera' },
45+
{ title: 'Side Menu', component: SideMenuPage, icon: 'bookmark' },
4646
// Removed for now as there were breaking changes in slides
47-
// { title: 'Slides', component: SlidesPage },
48-
{ title: 'Theming', component: ThemingPage },
47+
// { title: 'Slides', component: SlidesPage, icon: 'home' },
48+
{ title: 'Theming', component: ThemingPage, icon: 'power' },
4949
];
5050

5151
}

‎src/app/app.html

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,23 +37,42 @@ <h3>Paula Bolliger</h3>
3737
</div>
3838
<ion-list no-lines>
3939
<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
40+
<!--<ion-icon [name]="p.icon" item-left></ion-icon>-->
4041
{{p.title}}
4142
</button>
4243
</ion-list>
4344
</ion-content>
4445
</ion-menu>
4546
<!--Right side menu-->
46-
<ion-menu side="right" [content]="content" id="menu-right">
47+
<ion-menu side="right" type="push" [content]="content" id="menu-right">
4748
<ion-content>
4849
<ion-list no-lines>
4950
<!--Here you should put a logic to make the item active and show the its active arrow-->
5051
<button menuClose icon-only ion-item detail-none *ngFor="let icon of icons; let i = index">
5152
<div *ngIf="i == 0" class="active-menu-item"></div>
52-
<ion-icon name="{{icon}}"></ion-icon>
53+
<ion-icon [name]="icon"></ion-icon>
5354
</button>
5455
</ion-list>
5556
</ion-content>
5657
</ion-menu>
58+
<!--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>
67+
<ion-content>
68+
<ion-list no-lines>
69+
<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
70+
<ion-icon [name]="p.icon" item-left></ion-icon>
71+
{{p.title}}
72+
</button>
73+
</ion-list>
74+
</ion-content>
75+
</ion-menu>
5776
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
5877
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
5978
</div>

‎src/app/app.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,34 @@
133133
background: rgba(255, 255, 255, .3);
134134
}
135135
}
136+
137+
// Material Design Sidemenu
138+
#menu-material {
139+
.menu-header {
140+
padding: 5px 15px;
141+
background-image: url('../assets/img/misc/material-design-background.jpg');
142+
background-size: cover;
143+
color: white;
144+
.name {
145+
font-weight: 500;
146+
margin-bottom: 3px;
147+
}
148+
.e-mail {
149+
margin-top: 0;
150+
margin-bottom: 5px;
151+
}
152+
}
153+
.user-avatar {
154+
padding: .5em;
155+
height: 12vh;
156+
}
157+
h3,
158+
.label,
159+
{
160+
color: #999;
161+
font-weight: 400;
162+
}
163+
ion-icon {
164+
color: #777;
165+
}
166+
}

‎src/assets/img/misc/material-design-background.jpg

342 KB
Loading

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@
1616
<ion-content padding>
1717
<button ion-button block color="secondary" (click)="changeMenu(MENU.DEFAULT)">Default sidemenu</button>
1818
<button ion-button block color="danger" (click)="changeMenu(MENU.AVATAR)">Sidemenu with avatar</button>
19+
<button ion-button block color="black" (click)="changeMenu(MENU.MATERIAL)">Material Design</button>
1920
</ion-content>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export class SideMenuPage {
99

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

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

0 commit comments

Comments
 (0)