# Expanding Aside Layout
## This set of components is intended to allow for an expanding/contracting layout with an aside and main section.

## Contextual Components

* Aside: Fixed width. May only include one per `expanding-aside-layout`. Width Defaults to `450px`.
* Main: Fluid. May only include one per `expanding-aside-layout`.

```
### Basic Usage
You must use both the `{{expanding.aside}}` and `{{expanding.main}}` components. The Aside must always be on the left, and Main on the right.
```handlebars
{#expanding-aside-layout as |expanding|}}
  {{#expanding.aside}}
    ...
  {{/expanding.aside}}

  {{#expanding.main}}
    ...
  {{/expanding.main}}
{{/expanding-aside-layout}}
```

While inside of the `{{expanding-aside-layout}}` you will always have available to you an `expanding.isCollapsed` boolean that you may use to do all sorts of fancy things. For example, you may need to tell a map inside of the main section to update it's size. You can use this to trigger your resize event. Note that the resize may need to be in an `Ember.run.later()` with a `wait` of 200ms to account for the animation time.