Titanium Mobile Facebook Menu UI

app.js

if (Ti.version < 1.8 ) {
	alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');	  	
}

(function() {
	var Window = require('ui/handheld/ApplicationWindow');
	new Window().open();
})();

ApplicationWindow.js

function ApplicationWindow() {

  var MainView = require('ui/common/MainView')
      MenuTableView = require('ui/common/MenuTableView');

  var self = Ti.UI.createWindow();

  var mainView = new MainView(),
      menuTable = new MenuTableView();

	self.add(mainView);
	self.add(menuTable);

  menuTable.addEventListener('click', function(e) {
    switch(e.index) {
      case Ti.App.MenuRowIndex.ONE:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.TWO:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.FOUR:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.FIVE:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.SEVEN:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.EIGHT:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      case Ti.App.MenuRowIndex.TEN:
        mainView.fireEvent('ChangeText', {value:e.index});
        break;
      default :
        break;
    }
  });

	return self;
}
module.exports = ApplicationWindow;

MainView.js

function MainView() {

  var self = Ti.UI.createView({
    backgroundColor : 'white',
    zIndex  : 10,
  });

  var label = Ti.UI.createLabel({
    left    : 85,
    height  : Ti.UI.SIZE,
    width   : 150,
    color   : 'black',
    text    : 'value: none',
    textAlign : 'center',
  });
  self.add(label);

  var NavbarView = require('ui/common/NavbarView');
  var navbar = new NavbarView();
  self.add(navbar);

  var menuOpened = false;

  var menuOpen = function() {
    self.animate({
      left      : 260,
      curve     : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
      duration  : 300,
    }, function() {
      menuOpened = true;
    });
  };

  var menuClose = function() {
    self.animate({
      left      : 0,
      curve     : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
      duration  : 300,
    }, function() {
      menuOpened = false;
    });
  };

  navbar.addEventListener('BtnSubmenuToggle', function() {
    if (menuOpened) {
      menuClose();
    }
    else {
      menuOpen();
    }
  });

  self.addEventListener('ChangeText', function(e) {
    label.text = 'value: ' + e.value;
    menuClose();
  });

	return self;
}
module.exports = MainView;

MenuTableView.js

function MenuTableView() {

  var tableDataRow = [];

  (function(){
    for (var i=0; i<11; i++) {
      var row = Ti.UI.createTableViewRow({
        hasChild  : false,
        color     : 'lightgray',
        height    : 44,
        className : 'menu',
        backgroundColor : 'black',
        title     : 'menu ' + i,
      });
      if (i%3 == 0) {
        row.title = 'section ' + i,
        row.height = 22;
        row.backgroundColor = 'darkgray';
        row.font = {fontSize:15};
        row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
      }
      tableDataRow.push(row);
    }

    Ti.App.MenuRowIndex = {
      ONE   : 1,
      TWO   : 2,
      FOUR  : 4,
      FIVE  : 5,
      SEVEN : 7,
      EIGHT : 8,
      TEN   : 10,
    };

    Ti.App.MenuSectionIndex = {
      ZERO  : 0,
      THREE : 3,
      SIX   : 6,
      NINE  : 9,
    };
  })();

  var self = Ti.UI.createTableView({
    top     : 0,
    left    : 0,
    height  : Ti.UI.FILL,
    width   : 260,
    data    : tableDataRow,
    zIndex  : 5,
    backgroundColor : 'black',
    separatorColor  : 'darkgray',
  });

  return self;
}
module.exports = MenuTableView;

NavBarView.js

function NavbarView() {

  var self = Ti.UI.createView({
    top     : 0,
    left    : 0,
    height  : 44,
    width   : Ti.UI.FILL,
    backgroundColor : '#576996',
  });

  var btnMenu = Ti.UI.createButton({
    top     : 5,
    left    : 5,
    height  : 34,
    width   : 50,
    title   : 'Menu',
  });
  self.add(btnMenu);

  var lblTitle = Ti.UI.createLabel({
    top     : 5,
    left    : 115,
    height  : 34,
    width   : 90,
    text    : 'UITest',
    textAlign : 'center',
  });
  self.add(lblTitle);

  btnMenu.addEventListener('click', function(e) {
    self.fireEvent('BtnSubmenuToggle');
  });

  return self;
}
module.exports = NavbarView;