Navigation

MapSearchRoute.js

App.MapSearchRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render({
      into: "sidebar",
      outlet: "sidebar"
    });
  }
});

sidebar.html

<ul class="navigation">
  <li>
    {{#linkTo map.search class="accent-blue"}}
      <i class="icon-search icon-white"></i>
    {{/linkTo}}
  </li>

  <li>
    {{#linkTo map.overlay class="accent-purple"}}
      <i class="icon-th-large icon-white"></i>
    {{/linkTo}}
  </li>

  <li>
    {{#linkTo map.contact class="accent-green"}}
      <i class="icon-envelope icon-white"></i>
    {{/linkTo}}
  </li>
</ul>

{{outlet sidebar}}

SidebarView.js

App.SidebarView = Ember.View.extend({
  templateName: "sidebar",
  elementId: "sidebar",
  classNameBindings: ["position", "isVisible"],
  position: "right",
  isVisible: true,
  isPinned: false,
  settings: null,
  init: function () {
    this._super();
    var settings = App.get("settings").map.sidebar;

    this.set("position", settings.position);
    this.set("isVisible", settings.visible);
    this.set("isPinned", settings.pinned);
    this.set("settings", settings);
  }
});