MENU FLYOUT/DRAWER IN PIVOT APP TEMPLATE

Question

I will like to replicate menu flyout/drawer like the one used in the apps for google.
I want my users to click on menu icon on the app bar and all the list of menu to disply
from the left side of the app

NB: Am using pivot template for my app and VS2012, see the xaml code below

 

 xaml

<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION" x:Name="MainPivot" SelectionChanged="Pivot_SelectionChanged">
<!--Pivot item one-->
<phone:PivotItem Header="first">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>

<!--Pivot item two-->
<phone:PivotItem Header="second">
<!--Double line list no text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>

<!--Pivot item three-->
<phone:PivotItem Header="third">
<!--Double line list no text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>


<Grid VerticalAlignment="Top" Height="148" Margin="0,10,0,0" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="icon0" Grid.Column="0" Source="/Assets/ApplicationIcon.png" Opacity="0.5" Tap="Icon0_Tap" Margin="0,63,79,0"/>
<Image x:Name="icon1" Source="/Assets/ApplicationIcon.png" Opacity="0.5" Tap="Icon1_Tap" Grid.ColumnSpan="2" Margin="166,63,178,0" />
<Image x:Name="icon2" Source="/Assets/ApplicationIcon.png" Opacity="0.5" Tap="Icon2_Tap" Margin="67,63,10,0" Grid.Column="1" />
<Image x:Name="img1" Source="/Assets/img1.jpg" Margin="10,0,10,85" Grid.ColumnSpan="2" />

</Grid>

<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.

Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" IsHitTestVisible="False" />-->
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Assets/bookmarks.png" x:Name="booknark" Text="bookmark"/>
<shell:ApplicationBarIconButton IconUri="/Assets/facebook.png" x:Name="facebook" Text="facebook"/>
<shell:ApplicationBarIconButton IconUri="/Assets/twitter.png" x:Name="twitter" Text="twitter" />
<shell:ApplicationBarIconButton IconUri="/Assets/email.png" x:Name="Email" Text="Email"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>