mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
6681ad4a7d
- [x] Mobilemenu button is missing from `content` and `editor` views - [x] Mobilemenu pane slides entire content over, should expand over-top-of-content - [x] Mobilemenu can't be closed - [x] gh-view-title no longer generates an extra div; it is the h2. - [x] gh-autonav-toggle closes the mobile menu on mobile. renamed `gh-menu-toggle` - [ ] There is weird behaviour with mobile menu when changing from big=>small=>big viewport sizes - ~~[ ] (Future issue) Ghost should remember (localstorage?) whether desktop menu is expanded or collapsed~~
49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
/*
|
|
This cute little component has two jobs.
|
|
|
|
On desktop, it toggles autoNav behaviour. It tracks
|
|
that state via the maximise property, and uses the
|
|
state to render the appropriate icon.
|
|
|
|
On mobile, it renders a closing icon, and clicking it
|
|
closes the mobile menu
|
|
*/
|
|
|
|
import Ember from 'ember';
|
|
import mobileQuery from 'ghost/utils/mobile';
|
|
|
|
export default Ember.Component.extend({
|
|
classNames: ['gh-menu-toggle'],
|
|
|
|
isMobile: false,
|
|
maximise: false,
|
|
|
|
iconClass: Ember.computed('maximise', 'isMobile', function () {
|
|
if (this.get('maximise') && !this.get('isMobile')) {
|
|
return 'icon-maximise';
|
|
} else {
|
|
return 'icon-minimise';
|
|
}
|
|
}),
|
|
|
|
didInsertElement () {
|
|
this.set('isMobile', mobileQuery.matches);
|
|
this.set('mqListener', Ember.run.bind(this, function (mql) {
|
|
this.set('isMobile', mql.matches);
|
|
}));
|
|
mobileQuery.addListener(this.get('mqListener'));
|
|
},
|
|
|
|
willDestroyElement () {
|
|
mobileQuery.removeListener(this.get('mqListener'));
|
|
},
|
|
|
|
click: function () {
|
|
if (this.get('isMobile')) {
|
|
this.sendAction('mobileAction');
|
|
} else {
|
|
this.toggleProperty('maximise');
|
|
this.sendAction('desktopAction');
|
|
}
|
|
}
|
|
});
|