Foldable sidepanel with Ember JS

This Fiddle demonstrates how to build a reusable foldable sidepanel in Ember JS.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.6.1.js"></script>
<script type="text/x-handlebars" data-template-name="application">

<div class="viewport">
    
    <p>⬅ Toggle the side panel</p>
    <br/><br/>
    <p style="text-align:right">Or toggle the one ➡</p>
    
    {{#view App.Sidepanel}}
        <button {{action toggleSidepanel target="view"}} class="btn-toggle">
            {{#if view.isOpen}} close {{else}} open {{/if}}
        </button>
        <p>put your content here</p>
    {{/view}}
    
    {{#view App.Sidepanel class="sidepanel-2"}}
        <button {{action toggleSidepanel target="view"}} class="btn-toggle">
            {{#if view.isOpen}} close {{else}} open {{/if}}
        </button>
        <p>ooh yeah!! :)</p>
    {{/view}}
</div>

window.App = Em.Application.create();

App.Sidepanel = Em.View.extend({
    tagName: 'div',
    classNames: ['sidepanel', 'whatever'],
    classNameBindings: ['isOpen:opened:closed'],
    
    isOpen: false,
    
    toggleSidepanel: function(){
        this.toggleProperty('isOpen');
    }
});

</script>

SCSS

@mixin transform($params){
    -webkit-transform:$params;
       -moz-transform:$params;
        -ms-transform:$params;
            transform:$params;
}

/* Side panel reveal mecanism 
*/
.sidepanel {
    position:absolute; top:0; left:0;
    -webkit-transition:-webkit-transform .3s ease;
       -moz-transition:-moz-transform .3s ease;
        -ms-transition:-ms-transform .3s ease;
            transition:transform .3s ease;
    
    &.opened { @include transform(translate(0%, 0)); }
    &.closed { @include transform(translate(-95%, 0)); }
}
.sidepanel-2 {
    &.opened { @include transform(translate(0%, 0)); }
    &.closed { @include transform(translate(95%, 0)); }
}







/* ----------------------------------- */
/* styles for the purpose of this demo */

body { 
    background:#f9f9f9; 
    font-family:'Helvetica Neue', Arial; 
    font-size:12px; 
}

.viewport {
    overflow:hidden;
    padding:25px 75px;
    $margin:35px;
    position:absolute; 
    top:$margin; bottom:$margin*2; 
    left:$margin; right:$margin;
    outline:1px solid #3ab6da; background:white;
}

.sidepanel {
    width:200px; height:100%; padding:25px;
    background:#eee; border:1px solid #ccc;
    
    .btn-toggle { 
        display:inline-block; 
        position:absolute; left:100%; 
        margin:0; margin-left:-12px; 
        background:#f1f1f1; border:1px solid #ccc; 
        padding:5px 10px; 
        color:black; text-decoration:none;
        @include transform(rotate(90deg));
        &:hover { background:#ddd; }
    }
}
.sidepanel-2 {
    @extend .sidepanel;
    left:auto; right:0;
    
    .btn-toggle { 
        left:auto; right:100%; 
        margin-left:0; margin-right:-12px; 
    }
}

* { 
    -webkit-box-sizing:border-box; 
       -moz-box-sizing:border-box; 
        -ms-box-sizing:border-box; 
            box-sizing:border-box; 
}