components.navbar.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav',

  isMenuVisible: false,

  actions: {
    toggleMenu: function() {
      this.toggleProperty('isMenuVisible');
      this.core.set('isMenuVisible', isMenuVisible);
    },
  },
});

gistfile1.txt

Uncaught ReferenceError: isMenuVisible is not defined

this.core.get('isMenuVisible') is undefined.

What I want to do here is having distinct components to react and listen to `isMenuVisible` data change.

initializers.application.js

import Ember from 'ember';

// App level variables.
var core = Ember.Object.extend({
  isMenuVisibile: false,
});

export function initialize(application) {
  // register factory for dependency injection.
  application.register('core:variables', core, {singleton: true});

  // Inject our factory in all `controller` and `components`.
  application.inject('component', 'core', 'core:variables');
}

export default {
  name: 'application',
  initialize: initialize,
};