I am building an app that requires a BottomNavBar and a NavigationDrawer. I was able to do the trick based on this answer from StackOverflow. However, I got a random gray extra item that is even in the answer's pic:

This is my code:
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SaveThatPower.Views"
x:Name="SP_AppShell"
Title="Save That Power"
FlyoutHeaderBehavior="CollapseOnScroll"
FlyoutIcon="menu.png"
x:Class="SaveThatPower.AppShell">
<MenuItem Text="Options" />
<MenuItem
Command="{Binding YearTableCommand}"
Icon="user"
Text="Profile" />
<MenuItem
Command="{Binding YearTableCommand}"
Icon="seal"
Text="My awards" />
<MenuItem
Command="{Binding YearTableCommand}"
Icon="send"
Text="Feedback" />
<MenuItem
Command="{Binding YearTableCommand}"
Icon="about"
Text="About us" />
<FlyoutItem>
<ShellContent Icon="power_plug" Title="Home" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="Status" Icon="timetable" ContentTemplate="{DataTemplate local:YearTablePage}" />
<ShellContent Title="Gift" Icon="gift_open_outline" Route="GiftsPage" ContentTemplate="{DataTemplate local:GiftsPage}" />
<ShellContent Title="Tips" Icon="head_lightbulb_outline" Route="TipsPage" ContentTemplate="{DataTemplate local:TipsPage}" />
<ShellContent Title="City" Icon="map_clock" Route="AirQualityMapPage" ContentTemplate="{DataTemplate local:AirQualityMapPage}" />
</FlyoutItem>
</Shell>
