ember service observable

components.nav-bar.js

import Ember from 'ember';

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

  core:  Ember.inject.service('core'),

  actions: {
    toggleMenu: function() {
      var isMenuVisible = this.get('core.isMenuVisible');
      this.get('core').set('isMenuVisible', !isMenuVisible);
    },
  },
});

components.nav-menu.js

import Ember from 'ember';

export default Ember.Component.extend({
  core:  Ember.inject.service('core'),
});

indes.hbs

{{nav-bar}}

{{nav-menu}}

<main>
  Hello world.
</main>

nav-menu.hbs

<div class="menu {{concat "menu" (if core.isMenuVisible " visible")}}">
    <h3>I am a menu</h3>
</div>

service.core.js

import Ember from 'ember';

export default Ember.Service.extend({
  isMenuVisible: false,
});