Source: layout/nav-bar.js

/**
 * In the Navigation Bar layout, you have to two child views. The first child view is the
 * navigation Bar which initially is hidden off to the left.
 *
 * It can be displayed on demand by calling it's **show** method.
 * 
 * For tutorial, see <a href="../../learn/layout-navbar.html">layout-navbar.html</a>.
 * 
 * This class extends ludo.layout.Base
 * @namespace layout
 * @class ludo.layout.NavBar
 */
ludo.layout.NavBar = new Class({
    Extends:ludo.layout.Base,
    slideEl:undefined,

    onCreate:function(){
        this.view.getBody().css('overflowX', 'hidden');

    },

    onNewChild:function (child) {
        this.parent(child);
        child.getEl().css('position', 'absolute');
    },

    resize:function () {
        var widthOfFirst = this.getWidthOfMenu();

        this.view.children[0].resize({
            width:widthOfFirst,
            height:this.viewport.height
        });

        this.slideEl.css({
            width: (this.viewport.absWidth + widthOfFirst),
            left: this.view.layout.active ? 0 : (widthOfFirst * -1)
        });

        this.view.children[1].getEl().css('left', widthOfFirst + 'px');
        this.view.children[1].resize({
            width:this.viewport.absWidth,
            height:this.viewport.height
        })

    },
    /**
     Show menu
     @function show
     @memberof ludo.layout.NavBar.prototype
     @example
        view.getLayout().show();
     */
    show:function () {
        if (!this.isMenuOpen()) {
            if(this.view.children[0].hidden){
                this.view.children[0].show();
            }
            this.view.layout.active = true;
            this.slideEl.animate({
                left:0
            }, this.getDuration(), this.getEasing());
        }
    },
    /**
     hide menu
     @function hide
     @memberof ludo.layout.NavBar.prototype
     @example
        view.getLayout().hide();
     */
    hide:function () {
        if (this.isMenuOpen()) {
            this.view.layout.active = false;
            var widthOfFirst = this.getWidthOfMenu();

            this.slideEl.animate({
                left: widthOfFirst * -1
            }, this.getDuration(), this.getEasing());
        }
    },

	isMenuOpen:function(){
		return this.view.layout.active;
	},

    /**
     * Toggle between show and hide
     * @function toggle
     * @memberof ludo.layout.NavBar.prototype
     */
    toggle:function () {
        this[this.view.layout.active ? 'hide' : 'show']();
    },

    effect:function () {
        if (this.effectObject === undefined) {
            this.effectObject = new ludo.effect.Effect
        }
        return this.effectObject;
    },

    getDuration:function () {
        return this.view.layout.duration || 150;
    },

    getEasing:function(){
        return this.view.layout.easing || 'swing';
    },

    getWidthOfMenu:function(){
        var ret = this.view.children[0].layout.width;

        if(isNaN(ret)){
            switch(ret){
                case 'matchParent':
                    return this.viewport.width;
                default:
                    return parseInt(ret) * this.viewport.width / 100;
            }

        }else{
            return ret;
        }
    },

    getParentForNewChild:function () {
        if (!this.slideEl) {
            this.slideEl = $('<div style="height:100%;position:absolute"></div>');
            this.view.getBody().append(this.slideEl);

        }
        return this.slideEl;
    }

});