sidemenu distilled

gistfile1.js

//Barebones example of how we do sidemenu in iOS app.
//You use this window as the container for your navGroup.
var rootWin = Titanium.UI.createWindow({
    zIndex: 2,
    width: '100%',
    backgroundColor: '#f00',
    
    listPanelVisible: false //Custom prop
});

//Container to make listDrawer available globally.
//Shove your Table view in this.
var listsDrawer = Ti.UI.createWindow({
    navBarHidden: true,
    backgroundColor: '#0f0',
    modal: false,
    left: 0,
    width: 200,
    zIndex: 1
});

//Use this to cover the 'visible' part of rootWin.
//You would add a dropshadow to this for nice effect.
//In this example, i've just coloured it.
listsDrawer.clickTrap =  function() {
    var win = Ti.UI.createWindow({
        backgroundColor: "#00f", //For illustration, making it bgcolor, but you can leave it transparent
        opacity: 0.5, //for example
        left: 200 - 12, //To account for the dropshadow
        right: 0,
        top: 0,
        bottom: 0 
    });

    var ds = Ti.UI.createView({
        backgroundImage: '/images/dropshadow.png',
        width: 12,
        left: 0,
        top: 0,
        right: 0,
        touchEnabled: false
    });

    win.add(ds);
    win.open();
    return win;
};

rootWin.hideNav = function() {
    rootWin.clickTrap.hide();
    rootWin.clickTrap.close();

    rootWin.animate({
        duration: 200,
        left: 0
    });
    
    rootWin.listPanelVisible = false;
    rootWin.clickTrap = false;    
};

var showNavAnimEnd = function(e) {
    rootWin.clickTrap = listsDrawer.clickTrap();
    rootWin.clickTrap.addEventListener('click', function(e) {
        rootWin.hideNav();
    });        
};

rootWin.showNav = function() {
    rootWin.listPanelVisible = true;

    rootWin.animate({
        duration: 200,
        left: 200
    }, showNavAnimEnd);
};

rootWin.addEventListener('click', function() {
    rootWin.showNav();
});

listsDrawer.opacity = 0;
listsDrawer.open();
rootWin.open();
listsDrawer.opacity = 1;