Skip to content

Commit 6489861

Browse files
yannbfyannbf
committed
Adds other sidemenus - WIP
1 parent 8935023 commit 6489861

File tree

8 files changed

+111
-1
lines changed

8 files changed

+111
-1
lines changed

‎src/app/app.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { SideMenuPage } from '../pages/side-menu/side-menu';
12
import { IonicOfficialComponentsPage } from '../pages/ionic-official-components/ionic-official-components';
23
import { LoginListPage } from '../pages/login/login';
34
import { ThemingPage } from '../pages/theming/theming';
@@ -37,6 +38,7 @@ export class MyApp {
3738
{ title: 'Miscellaneous', component: MiscellaneousListPage },
3839
{ title: 'Popup Menu', component: PopupMenuListPage },
3940
{ title: 'Profile', component: ProfileListPage },
41+
{ title: 'Side Menu', component: SideMenuPage },
4042
// Removed for now as there were breaking changes in slides
4143
// { title: 'Slides', component: SlidesPage },
4244
{ title: 'Theming', component: ThemingPage },

‎src/app/app.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div class="{{global.state['theme']}}">
2+
<!--Default Menu-->
23
<ion-menu [content]="content" id="menu-components" class="animated-menu">
34
<ion-header>
45
<ion-toolbar>
@@ -13,6 +14,38 @@
1314
</ion-list>
1415
</ion-content>
1516
</ion-menu>
17+
<!--Side Menu with avatar-->
18+
<ion-menu [content]="content" id="menu-avatar" class="animated-menu">
19+
<ion-content>
20+
<ion-row style="align-items:center;">
21+
<ion-col width-25>
22+
<img class="round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'" />
23+
</ion-col>
24+
<ion-col width-50>
25+
<img class="round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'" />
26+
</ion-col>
27+
<ion-col width-25>
28+
<img class="round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'" />
29+
</ion-col>
30+
</ion-row>
31+
<ion-row style="justify-content: center;">
32+
<h3>Paula Bolliger</h3>
33+
</ion-row>
34+
<ion-list>
35+
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
36+
{{p.title}}
37+
</button>
38+
</ion-list>
39+
</ion-content>
40+
</ion-menu>
41+
<!--Right side menu-->
42+
<ion-menu class="right-side-menu" side="right" [content]="content" id="menu-right">
43+
<ion-list>
44+
<!--<button menuClose icon-only ion-item *ngFor="let p of pages">
45+
</button>-->
46+
<ion-icon ion-item *ngFor="let p of pages" name="home"></ion-icon>
47+
</ion-list>
48+
</ion-menu>
1649
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
1750
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
1851
</div>

‎src/app/app.imports.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { SideMenuPage } from '../pages/side-menu/side-menu';
12
// Global state (used for theming)
23
import { AppState } from './app.global';
34

@@ -149,6 +150,9 @@ export const Pages = [
149150
LoginInstagramPage,
150151
LoginSliderPage,
151152

153+
// Side Menu
154+
SideMenuPage,
155+
152156
// Miscellaneous
153157
MiscellaneousListPage,
154158
PopupMenuListPage,

‎src/app/app.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
}
4040

4141
.round {
42-
border-radius: 3%;
42+
border-radius: 50%;
4343
}
4444

4545
.transparent-header {
@@ -65,3 +65,11 @@
6565
}
6666
// ---
6767
}
68+
69+
// right side menu
70+
.right-side-menu {
71+
.menu-inner {
72+
width: 10vh;
73+
background: rgba(120, 40, 215, .8);
74+
}
75+
}

‎src/pages/popup-modal/signup-modal/signup-modal.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ page-signup-modal {
22
.scroll-content {
33
overflow: hidden;
44
}
5+
.round {
6+
border-radius: 3%;
7+
}
58
.swiper-pagination-bullet {
69
background-color: white;
710
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-buttons start>
4+
<button ion-button icon-only menuToggle>
5+
<ion-icon name="menu"></ion-icon>
6+
</button>
7+
</ion-buttons>
8+
<ion-title>Side Menu</ion-title>
9+
<ion-buttons end>
10+
<button ion-button icon-only>
11+
<ion-icon name="home"></ion-icon>
12+
</button>
13+
</ion-buttons>
14+
</ion-navbar>
15+
</ion-header>
16+
<ion-content padding>
17+
<h3>Advanced Ionic 2 Components</h3>
18+
<p>
19+
This app aims to help developers speed up their development process and learn how components work. It would be really nice
20+
if you checked out the <a href="https://github.com/yannbf/ionic2-components">repository</a> and contribute!
21+
</p>
22+
<button class="pop-in" ion-button full color="secondary" (click)="changeMenu(MENU.DEFAULT)">Default sidemenu</button>
23+
<button class="pop-in" ion-button full color="secondary" (click)="changeMenu(MENU.AVATAR)">Sidemenu with avatar</button>
24+
</ion-content>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-side-menu {
2+
3+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { MenuController, NavController } from 'ionic-angular';
3+
4+
@Component({
5+
selector: 'page-side-menu',
6+
templateUrl: 'side-menu.html'
7+
})
8+
export class SideMenuPage {
9+
10+
MENU = {
11+
DEFAULT: "menu-components",
12+
AVATAR: "menu-avatar"
13+
}
14+
15+
constructor(public navCtrl: NavController, public menuCtrl: MenuController) { }
16+
17+
ionViewDidLoad() {
18+
}
19+
20+
changeMenu(menu) {
21+
// Disables all other sidemenus
22+
Object.keys(this.MENU).map(k => this.menuCtrl.enable(false, this.MENU[k]));
23+
24+
// Enables then open the selected menu
25+
this.menuCtrl.enable(true, menu);
26+
this.menuCtrl.open(menu);
27+
}
28+
29+
toggleRightMenu() {
30+
this.menuCtrl.open("right").then(result => console.log(result));
31+
}
32+
33+
}

0 commit comments

Comments
 (0)