Skip to content

Commit 6b766d3

Browse files
yannbfyannbf
committed
right side menu + menu with avatar stylings
1 parent 6489861 commit 6b766d3

File tree

13 files changed

+2193
-72
lines changed

13 files changed

+2193
-72
lines changed

‎src/app/app.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@ export class MyApp {
2424
rootPage: any = HomePage;
2525

2626
pages: Array<{ title: string, component: any }>;
27+
icons: Array<string>;
2728
state: any;
2829

2930
constructor(public platform: Platform, public global: AppState) {
3031
this.initializeApp();
32+
this.icons = [
33+
'home', 'alarm', 'analytics', 'archive', 'basket', 'body', 'bookmarks', 'camera', 'beer', 'power'
34+
]
3135

3236
this.pages = [
3337
{ title: 'Home', component: HomePage },

‎src/app/app.html

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,44 @@
1515
</ion-content>
1616
</ion-menu>
1717
<!--Side Menu with avatar-->
18-
<ion-menu [content]="content" id="menu-avatar" class="animated-menu">
18+
<ion-menu [content]="content" id="menu-avatar" class="animated-menu font-montserrat">
1919
<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)">
20+
<div #header>
21+
<ion-row style="align-items:center;">
22+
<ion-col width-25>
23+
<img src="assets/icon/icon-email.svg" />
24+
<span class="icon-badge">4</span>
25+
</ion-col>
26+
<ion-col width-50>
27+
<img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
28+
/>
29+
</ion-col>
30+
<ion-col width-25>
31+
<img src="assets/icon/icon-calendar.svg" />
32+
</ion-col>
33+
</ion-row>
34+
<ion-row style="justify-content: center;">
35+
<h3>Paula Bolliger</h3>
36+
</ion-row>
37+
</div>
38+
<ion-list no-lines>
39+
<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
3640
{{p.title}}
3741
</button>
3842
</ion-list>
3943
</ion-content>
4044
</ion-menu>
4145
<!--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>
46+
<ion-menu side="right" [content]="content" id="menu-right">
47+
<ion-content>
48+
<ion-list no-lines>
49+
<!--Here you should put a logic to make the item active and show the its active arrow-->
50+
<button menuClose icon-only ion-item detail-none *ngFor="let icon of icons; let i = index">
51+
<div *ngIf="i == 0" class="active-menu-item"></div>
52+
<ion-icon name="{{icon}}"></ion-icon>
53+
</button>
54+
</ion-list>
55+
</ion-content>
4856
</ion-menu>
4957
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
5058
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

‎src/app/app.scss

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,69 @@
6767
}
6868

6969
// right side menu
70-
.right-side-menu {
70+
#menu-right {
71+
button {
72+
padding-left: 16px;
73+
}
74+
ion-content {
75+
background: rgba(255, 36, 36, 0.82);
76+
}
7177
.menu-inner {
7278
width: 10vh;
73-
background: rgba(120, 40, 215, .8);
79+
}
80+
.active-menu-item {
81+
position: absolute;
82+
border-top: 6px solid transparent;
83+
border-bottom: 6px solid transparent;
84+
border-left: 6px solid #ffffff;
85+
}
86+
.label {
87+
display: flex;
88+
align-items: center;
89+
}
90+
.list-md[no-lines] .item-block,
91+
.list-md[no-lines] ion-item-options,
92+
.list-md[no-lines] .item .item-inner,
93+
.list-ios[no-lines] .item-block,
94+
.list-ios[no-lines] ion-item-options,
95+
.list-ios[no-lines] .item .item-inner {
96+
padding: .3rem 0;
97+
background: transparent;
98+
color: white;
99+
}
100+
ion-icon {
101+
line-height: 1;
102+
}
103+
}
104+
105+
.icon-badge {
106+
top: 0px;
107+
right: 0px;
108+
background: #FF5D5D;
109+
color: white;
110+
font-size: 12px;
111+
position: absolute;
112+
padding: 5px 8px;
113+
border-radius: 15px;
114+
}
115+
116+
// Sidemenu with avatar
117+
#menu-avatar {
118+
.user-avatar {
119+
padding: .5em;
120+
}
121+
h3,
122+
.label {
123+
color: white;
124+
font-weight: bold;
125+
}
126+
.item {
127+
background: transparent;
128+
}
129+
ion-content {
130+
background: linear-gradient(48deg, rgba(157, 72, 173, 0.8) 0%, rgba(157, 72, 173, 0.86) 28%, rgba(0, 168, 168, 0.98) 93%, rgba(0, 168, 168, 1) 100%);
131+
}
132+
.menu-inner {
133+
background: rgba(255, 255, 255, .3);
74134
}
75135
}

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

28.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)