Ember.js - having a subnav display on application.hbs on click only without rendering a different template

Ember.js - having a subnav display on application.hbs on click only
without rendering a different template

I'm having issues trying to get a subnav to display on click in Ember. In
my application template I have a nav bar, and at the root I have the index
template which is a full browser width template sitting behind the navbar
on application template. Looks like this:

What I want to happen is when 'ABOUT' is clicked, a subnav displays on the
white horizontal bar directly below the main nav. The white horizontal bar
is also part of the application template. That's the only thing on the
page that I want to change though when 'ABOUT' is clicked. Then when when
you click an item on the subnav, say 'STAFF' it renders the about.staff
template.
My problem is getting this to happen on the application template. Because
if the user is currently on the 'PROGRAMS' template, and then they click
about, I want the user to stay on the programs template but the subnav to
still drop down below the main nav.
I've tried nested routes:
Ew.Router.map ->
@.resource "about", ->
@.route "philosophy"
@.route "leadership"
@.route "staff"
@.route "affiliations"
@.route "conditions"
@.route "programs"
@.route "testimonials"
Then I tried rendering a named outlet in application hbs with the
following ApplicationRoute
Ew.ApplicationRoute = Ember.Route.extend(
renderTemplate: ->
@.render
@.render 'about',
outlet: 'about',
into: 'application'
)
But I'm just getting an error:
Error while loading route: TypeError {} ember.js?body=1:382
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined
I would like to do this without having to hack a bunch of jquery into it.
I hope this makes sense, I really appreciate any help.