Custom actionbar menu

index.js

function showMenu(){
  // posbile position to implement a show animation
  $.menu.visible = true;
  $.menu.height = Ti.UI.SIZE;
}

function hideMenu(){
  // posbile position to implement a hiding animation
  $.menu.visible = false;
  $.menu.height = 0;
}

function handleMenuItem(e){
  console.log(e.source.action);
  hideMenu();
}

$.index.open();

index.tss

"Window": {
  theme: "Theme.AppCompat.Translucent.NoTitleBar",
  backgroundColor: "#ffffff"
}

"#actionbar": {
  backgroundColor: "#575757",
  height: 60,
  top: 0
}

"#menuIcon": {
  image: '/images/menu.png',
  width: 30,
  height: Ti.UI.SIZE,
  right: 15
}

"#menu": {
  height: 0,
  visible: false,
  width: 170,
  backgroundColor: "#575757",
  right: 15,
  top: 20,
  zIndex: 99,
  borderWidth: 1,
  borderColor: "#232323",
  layout: 'vertical'
  
}

".menuLabel": {
  color: "#ffffff",
  left: 10,
  right: 10,
  textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
  font: {
    fontSize: 20
  },
  top: 20
}

"#firstLabel": {
  text: "Menu Item",
}

"#secondLabel": {
  text: "Do something",
}

index.xml

<Alloy>
  <Window class="container">
    <View id="menu">
      <Label id="firstLabel" class="menuLabel" action="first" onClick="handleMenuItem" />
      <Label id="secondLabel" class="menuLabel" action="something" onClick="handleMenuItem" />
      <View height="20" />
    </View>
    <View id="actionbar">
      <ImageView id="menuIcon" onClick="showMenu" />
    </View>
  </Window>
</Alloy>