Skip to content

Commit bff60ea

Browse files
Hieu Lam - TMAkhangon
Hieu Lam - TMA
and
khangon
authored
feature-8752: Redesign Burger Menu for Mobile Views (#9038)
* feature-8752: Redesign Burger Menu for Mobile Views * feature-8752: Redesign Burger Menu for Mobile Views --------- Co-authored-by: Khang On - TMA <[email protected]>
1 parent e9093a5 commit bff60ea

File tree

8 files changed

+182
-54
lines changed

8 files changed

+182
-54
lines changed

‎app/components/public/side-menu.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,23 @@ export default class SideMenu extends Component {
5858
goToSection(section) {
5959
this.set('activeSection', section);
6060
this.set('activeMenuSection', section);
61+
this.hideSidebar();
62+
}
63+
64+
@action
65+
hideSidebar() {
66+
const target = document.querySelector('#main-container');
67+
if (target) {
68+
// Delay click to give time to render
69+
setTimeout(() => {
70+
target.click();
71+
}, 0);
72+
}
6173
}
6274

6375
@action
6476
scrollToTarget(section) {
77+
this.hideSidebar();
6578
document.querySelector(`#${section}`).scrollIntoView({
6679
behavior: 'smooth'
6780
});

‎app/components/side-bar.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import classic from 'ember-classic-decorator';
22
import $ from 'jquery';
33
import Component from '@ember/component';
4-
import { action } from '@ember/object';
5-
4+
import { action, computed } from '@ember/object';
5+
import { inject as service } from '@ember/service';
6+
import { tracked } from '@glimmer/tracking';
67
@classic
78
export default class SideBar extends Component {
9+
@tracked
810
sidebarVisible = false;
911

12+
@service('event') evtService;
13+
1014
toggleSidebar() {
1115
this.toggleProperty('sidebarVisible');
1216
}
@@ -23,6 +27,13 @@ export default class SideBar extends Component {
2327
}
2428
}
2529

30+
31+
@computed('session.currentRouteName')
32+
get isEventPageRoute() {
33+
const currentRouteName = String(this.session.currentRouteName);
34+
return currentRouteName.includes('public') && !currentRouteName.includes('group');
35+
}
36+
2637
didInsertElement() {
2738
super.didInsertElement(...arguments);
2839

@@ -35,7 +46,7 @@ export default class SideBar extends Component {
3546
*/
3647

3748
this.set('$sidebarOpener', $('.open.sidebar', this.element));
38-
this.set('$sidebarClosers', $('.ui.sidebar', this.element).find('.item,a,.link,button'));
49+
this.set('$sidebarClosers', $('.ui.sidebar', this.element).find('.item,a,.link,button').not('div.item.ui'));
3950
this.$sidebarClosers.push($('.main-container', this.element)[0]);
4051

4152
if (this.$sidebarOpener) {

‎app/routes/public.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import classic from 'ember-classic-decorator';
22
import Route from '@ember/routing/route';
3+
import { inject as service } from '@ember/service';
34

45
@classic
56
export default class PublicRoute extends Route {
7+
@service event;
8+
69
titleToken(model) {
710
return model.get('name');
811
}
@@ -13,6 +16,10 @@ export default class PublicRoute extends Route {
1316
});
1417
}
1518

19+
afterModel(model) {
20+
this.event.currentEvent = model;
21+
}
22+
1623
resetController(controller, isExiting) {
1724
if (isExiting) {
1825
controller.set('side_panel', null);

‎app/services/event.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export default class EventService extends Service {
88
@service declare loader: Loader;
99
@service declare authManager: AuthManagerService;
1010

11+
@tracked
12+
currentEvent:any = null
13+
1114
@tracked eventStreamMap = new Map<string, any>();
1215

1316
async hasStreams(eventId: number): Promise<{exists: boolean; can_access: boolean;}> {
@@ -40,6 +43,13 @@ export default class EventService extends Service {
4043
return (await this.getSpeakersMeta(eventId)).data.length;
4144
}
4245

46+
setCurrentEvent(evt:any) {
47+
this.currentEvent = evt;
48+
}
49+
50+
getCurrentEvent() {
51+
return this.currentEvent
52+
}
4353
}
4454

4555
// DO NOT DELETE: this is how TypeScript knows how to look up your services.

‎app/styles/components/explore/side-bar.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,13 @@
2929
.side-bar {
3030
margin-right: 10px !important;
3131
}
32+
33+
.content {
34+
&.ui {
35+
&.sub-menu {
36+
a {
37+
padding-left: 2.5rem;
38+
}
39+
}
40+
}
41+
}

‎app/templates/components/public/side-menu.hbs

Lines changed: 97 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,153 @@
11
{{#if (eq this.session.currentRouteName 'public.index')}}
22
<a href='#info' {{action "scrollToTarget" 'info' }} class='item active scroll'>
3-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} info icon"></i>{{t 'Info'}}</div>
3+
<div>
4+
{{#unless this.hideIcon}}
5+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} info icon"></i>
6+
{{/unless}}
7+
{{t 'Info'}}</div>
48
</a>
59
{{#if this.event.tickets.length}}
610
<a href='#tickets' {{action "scrollToTarget" 'tickets' }} class='item scroll'>
7-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} ticket icon"></i>{{t 'Tickets'}}</div>
11+
<div>
12+
{{#unless this.hideIcon}}
13+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} ticket icon"></i>
14+
{{/unless}}
15+
{{t 'Tickets'}}</div>
816
</a>
917
{{/if}}
1018

1119
{{else}}
12-
<LinkTo class="item" @route="public.index" {{action 'goToSection' 'info' }}>
13-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} info icon"></i>{{t 'Info'}}</div>
20+
<LinkTo class="item" @route="public.index" @models={{array this.event.id}} {{action 'goToSection' 'info' }}>
21+
<div>
22+
{{#unless this.hideIcon}}
23+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} info icon"></i>
24+
{{/unless}}
25+
{{t 'Info'}}</div>
1426
</LinkTo>
1527
{{#if this.event.tickets.length}}
16-
<LinkTo class="item" @route="public.index" {{action 'goToSection' 'tickets' }}>
17-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} ticket icon"></i>{{t 'Tickets'}}</div>
28+
<LinkTo class="item" @route="public.index" @models={{array this.event.id}} {{action 'goToSection' 'tickets' }}>
29+
<div>
30+
{{#unless this.hideIcon}}
31+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} ticket icon"></i>
32+
{{/unless}}
33+
{{t 'Tickets'}}</div>
1834
</LinkTo>
1935
{{/if}}
2036

2137
{{/if}}
2238

2339
{{#if (and this.event.isSchedulePublished this.showSessions)}}
24-
<LinkTo @route="public.sessions" @query={{hash sort='starts-at' date=null search=null track=null sessionType=null room=null my_speaker_sessions=null my_schedule=null}} class="item">
25-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} book icon"></i>{{t 'Schedule'}}</div>
40+
<LinkTo
41+
@route="public.sessions"
42+
@models={{array this.event.id}}
43+
{{action 'hideSidebar'}}
44+
@query={{hash sort='starts-at' date=null search=null track=null sessionType=null room=null my_speaker_sessions=null my_schedule=null}} class="item">
45+
<div>
46+
{{#unless this.hideIcon}}
47+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} book icon"></i>
48+
{{/unless}}
49+
{{t 'Schedule'}}</div>
2650
</LinkTo>
2751
{{/if}}
2852
{{#if this.showSpeakers}}
29-
<LinkTo @route="public.speakers" @query={{hash search=null}} class="item">
30-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} bullhorn icon"></i>{{t 'Speakers'}}</div>
53+
<LinkTo @route="public.speakers"
54+
@models={{array this.event.id}}
55+
{{action 'hideSidebar'}}
56+
@query={{hash earch=null}} class="item">
57+
<div>
58+
{{#unless this.hideIcon}}
59+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} bullhorn icon"></i>
60+
{{/unless}}
61+
{{t 'Speakers'}}</div>
3162
</LinkTo>
3263
{{/if}}
3364
{{#if (and this.isSchedulePublished this.showSessions)}}
34-
<LinkTo @route="public.schedule" class="item">
35-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} calendar icon"></i>{{t 'Calendar'}}</div>
65+
<LinkTo @route="public.schedule" @models={{array this.event.id}} {{action 'hideSidebar'}} class="item">
66+
<div>
67+
{{#unless this.hideIcon}}
68+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} calendar icon"></i>
69+
{{/unless}}
70+
{{t 'Calendar'}}</div>
3671
</LinkTo>
3772
{{/if}}
3873
{{#if (and this.event.isSponsorsEnabled this.event.sponsors)}}
3974
{{#if (eq this.session.currentRouteName 'public.index')}}
4075
<a href='#sponsor' {{action "scrollToTarget" 'sponsor' }} class='item scroll'>
41-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} dollar icon"></i>{{t 'Supporters'}}</div>
76+
<div>
77+
{{#unless this.hideIcon}}
78+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} dollar icon"></i>
79+
{{/unless}}
80+
{{t 'Supporters'}}</div>
4281
</a>
4382
{{else}}
44-
<LinkTo class="item" @route="public.index" {{action 'goToSection' 'sponsor' }}>
45-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} dollar icon"></i>{{t 'Supporters'}}</div>
83+
<LinkTo class="item" @route="public.index" @models={{array this.event.id}} {{action 'goToSection' 'sponsor' }}>
84+
<div>
85+
{{#unless this.hideIcon}}
86+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} dollar icon"></i>
87+
{{/unless}}
88+
{{t 'Supporters'}}</div>
4689
</LinkTo>
4790
{{/if}}
4891
{{/if}}
4992
{{#if this.showExhibitors}}
50-
<LinkTo @route="public.exhibition" class="item">
51-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>{{t 'Exhibition'}}</div>
93+
<LinkTo @route="public.exhibition" @models={{array this.event.id}} {{action 'hideSidebar'}} class="item">
94+
<div>
95+
{{#unless this.hideIcon}}
96+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>
97+
{{/unless}}
98+
{{t 'Exhibition'}}</div>
5299
</LinkTo>
53100
{{/if}}
54101
{{#if this.event.hasOwnerInfo}}
55102
{{#if (eq this.session.currentRouteName 'public.index')}}
56103
<a href='#organizer' {{action "scrollToTarget" 'organizer' }} class='item scroll'>
57-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>{{t 'Organizer'}}</div>
104+
<div>
105+
{{#unless this.hideIcon}}
106+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>
107+
{{/unless}}
108+
{{t 'Organizer'}}</div>
58109
</a>
59110
{{else}}
60-
<LinkTo class="item" @route="public.index" {{action 'goToSection' 'organizer' }}>
61-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>{{t 'Organizer'}}</div>
111+
<LinkTo class="item" @route="public.index" @models={{array this.event.id}} {{action 'goToSection' 'organizer' }}>
112+
<div>{{#unless this.hideIcon}}
113+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} users icon"></i>
114+
{{/unless}}
115+
{{t 'Organizer'}}</div>
62116
</LinkTo>
63117
{{/if}}
64118
{{/if}}
65119
{{#if this.shouldShowCallforSpeakers }}
66-
<LinkTo @route="public.cfs" class="item">
67-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} bullhorn icon"></i>{{t 'Call for Speakers'}}</div>
120+
<LinkTo @route="public.cfs" @models={{array this.event.id}} {{action 'hideSidebar'}} class="item">
121+
<div>
122+
{{#unless this.hideIcon}}
123+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} bullhorn icon"></i>
124+
{{/unless}}
125+
{{t 'Call for Speakers'}}</div>
68126
</LinkTo>
69127
{{/if}}
70128
{{#if (eq this.session.currentRouteName 'public.index')}}
71129
<a href='#getting-here' {{action "scrollToTarget" 'getting-here' }} class='item scroll'>
72-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} icon map marker alternate"></i>{{t 'Getting here'}}</div>
130+
<div>
131+
{{#unless this.hideIcon}}
132+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} icon map marker alternate"></i>
133+
{{/unless}}
134+
{{t 'Getting here'}}</div>
73135
</a>
74136
{{else}}
75-
<LinkTo class="item" @route="public.index" {{action 'goToSection' 'getting-here' }}>
76-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} icon map marker alternate"></i>{{t 'Getting here'}}</div>
137+
<LinkTo class="item" @route="public.index" @models={{array this.event.id}} {{action 'goToSection' 'getting-here' }}>
138+
<div>
139+
{{#unless this.hideIcon}}
140+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} icon map marker alternate"></i>
141+
{{/unless}}
142+
{{t 'Getting here'}}</div>
77143
</LinkTo>
78144
{{/if}}
79145
{{#if this.event.codeOfConduct}}
80-
<LinkTo @route="public.coc" class="item">
81-
<div><i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} book icon"></i>{{t 'Code of Conduct'}}</div>
146+
<LinkTo @route="public.coc" @models={{array this.event.id}} {{action 'hideSidebar'}} class="item">
147+
<div>
148+
{{#unless this.hideIcon}}
149+
<i class="mr-4 {{unless this.device.isMobile 'hidden-item'}} icon book"></i>
150+
{{/unless}}
151+
{{t 'Code of Conduct'}}</div>
82152
</LinkTo>
83153
{{/if}}

‎app/templates/components/side-bar.hbs

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
11
<div class="ui left inverted vertical menu sidebar {{if this.sidebarVisible 'visible'}}">
2-
<div class="search-bar d-flex items-center space-between m-2 p-2">
2+
<div class="search-bar d-flex items-center space-between m-2 p-2">
33
<Input @class="prompt" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
4-
<i class="search icon"></i>
5-
</div>
4+
<i class="search icon"></i>
5+
</div>
66
{{#if this.session.isAuthenticated}}
7-
<div class="item">
8-
<a href="{{href-to 'account.profile'}}">
9-
<Widgets::SafeImage
10-
@isAvatar={{true}}
11-
@class="ui avatar round image side-bar"
12-
@src={{if this.authManager.currentUser.avatarUrl this.authManager.currentUser.avatarUrl "/images/placeholders/avatar.png"}} />
13-
{{if this.authManager.currentUser
14-
(if this.authManager.currentUser.firstName this.authManager.currentUser.firstName this.authManager.currentUser.email)
15-
'Welcome'}}
16-
</a>
17-
</div>
7+
<UiAccordion>
8+
<div class="item ui {{if this.isEventPageRoute 'title'}}">
9+
<Widgets::SafeImage @isAvatar={{true}} @class="ui avatar round image side-bar" @src={{if
10+
this.authManager.currentUser.avatarUrl this.authManager.currentUser.avatarUrl "/images/placeholders/avatar.png"
11+
}} />
12+
{{if this.authManager.currentUser
13+
(if this.authManager.currentUser.firstName this.authManager.currentUser.firstName
14+
this.authManager.currentUser.email)
15+
'Welcome'}}
16+
</div>
17+
<div class="{{if this.isEventPageRoute 'content sub-menu'}} ui">
1818
<a href="{{href-to 'my-tickets'}}" class="item">{{t 'My Tickets'}}</a>
1919
<a href="{{href-to 'my-sessions'}}" class="item">{{t 'My Sessions'}}</a>
2020
<a href="{{href-to 'my-groups.list'}}" class="item">{{t 'Groups'}}</a>
2121
<a href="{{href-to 'events.list' 'live'}}" class="item">{{t 'Manage Events'}}</a>
2222
<div class="divider"></div>
2323
<a href="{{href-to 'account.profile'}}" class="item">{{t 'Account'}}</a>
2424
{{#if this.authManager.currentUser.isAnAdmin}}
25-
<a href="{{href-to 'admin'}}" class="item">{{t 'Admin'}}</a>
25+
<a href="{{href-to 'admin'}}" class="item">{{t 'Admin'}}</a>
2626
{{/if}}
27-
<div class="divider"></div>
2827
<a class="item logout-button" href="{{href-to 'logout'}}">{{t 'Logout'}}</a>
28+
</div>
29+
{{#if this.isEventPageRoute }}
30+
31+
<Public::SideMenu @event={{this.evtService.currentEvent}} @hideIcon={{true}} />
32+
{{/if}}
33+
</UiAccordion>
34+
35+
36+
2937
{{else}}
30-
<a href="{{href-to 'pricing'}}" class="item">{{t 'Pricing'}}</a>
31-
<a href="{{href-to 'login'}}" class="item">{{t 'Login'}}</a>
38+
{{#if this.isEventPageRoute}}
39+
<Public::SideMenu @event={{this.evtService.currentEvent}} @hideIcon={{true}} />
40+
{{/if}}
41+
<a href="{{href-to 'pricing'}}" class="item">{{t 'Pricing'}}</a>
42+
<a href="{{href-to 'login'}}" class="item">{{t 'Login'}}</a>
3243
{{/if}}
3344
</div>
3445
<div class="pusher">

‎app/templates/public.hbs

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,13 @@
2929
<div class="sixteen wide column content {{if this.smallLead 'with small lead'}}" id="event-contents">
3030
<div class="ui stackable grid">
3131
<div class="three wide column" id="public-event-content">
32-
{{#if this.device.isMobile}}
33-
{{#if this.displaySideMenu}}
34-
<Public::SideMenuOuter @event={{this.model}} />
35-
{{/if}}
36-
{{else}}
32+
{{#unless this.device.isMobile}}
3733
{{#if this.displaySideMenu}}
3834
<div class="ui fluid side-menu">
3935
<Public::SideMenuOuter @event={{this.model}} />
4036
</div>
4137
{{/if}}
42-
{{/if}}
38+
{{/unless}}
4339
</div>
4440
{{#unless this.device.isMobile}}
4541
<div class="ten wide column">

0 commit comments

Comments
 (0)