gm_cabs_driver_maui/GMCabsDriverAssistantSolution/AppShell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:GMCabsDriverAssistantSolution.Views"
       Title="GMCabsDriverAssistant"
       xmlns:vm="clr-namespace:GMCabsDriverAssistant.ViewModels"
       x:Class="GMCabsDriverAssistantSolution.AppShell"
       FlyoutWidth="220"
       Visual="Material">
    <!--<Shell.BindingContext>
        <vm:AppShellViewModel />
    </Shell.BindingContext>-->
    <!--
        The overall app visual hierarchy is defined here, along with navigation.
    
        https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
    -->

    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" x:Key="TabBar" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" x:Key="FlyoutItem"/>

            <!--
            Default Styles for all Flyout Items
            https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
            -->
            <Style Class="FlyoutItemLabelStyle" TargetType="Label" x:Key="FlyoutItemLabelStyle">
                <Setter Property="TextColor" Value="White"></Setter>
            </Style>
            <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True" x:Key="FlyoutItemLayoutStyle">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{x:OnPlatform WinUI=Transparent, iOS=White}"/>
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

            <!--
            Custom Style you can apply to any Flyout Item
            -->
            <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True" x:Key="MenuItemLayoutStyle">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Shell.Resources>

    <ShellItem Route="PermissionPage" FlyoutItemIsVisible="False" >
        <!--<ShellContent ContentTemplate="{DataTemplate local:PermissionCheckPage}" />-->
    </ShellItem>

    <ShellItem Route="splashpage" FlyoutItemIsVisible="false" >
        <!--<ShellContent ContentTemplate="{DataTemplate local:SplashPage}" />-->
    </ShellItem>

    <ShellItem Route="LoginPage" FlyoutItemIsVisible="False" >
        <ShellContent ContentTemplate="{DataTemplate local:LoginPage}" />
    </ShellItem>

    <!-- 
        When the Flyout is visible this defines the content to display in the flyout.
        FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element    
        https://docs.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
    -->
    <FlyoutItem x:Name="homePageFlyout" IsVisible="{OnIdiom Phone=True,Tablet=False}" Title="Home" Icon="ic_menu_home.png">
        <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}"/>
    </FlyoutItem>
    <!--<FlyoutItem x:Name="homePageTabletFlyout" Shell.FlyoutItemIsVisible="{Binding IsCanViewHome}" Title="Home" Icon="ic_menu_home.png">
        <ShellContent Route="HomePageTablet" ContentTemplate="{DataTemplate local:HomePageTablet}"/>
    </FlyoutItem>-->
    <!--<FlyoutItem Title="Coupons" Icon="ic_menu_end_shift.png">
        <ShellContent Route="CouponsPage" ContentTemplate="{DataTemplate local:CouponsPage}" />
    </FlyoutItem>-->
    <!--<FlyoutItem Title="Rydo" Icon="ic_menu_rydo.png">
        <ShellContent Route="AcceptedFutureBookingsPage" ContentTemplate="{DataTemplate local:AcceptedFutureBookingsPage}" />
    </FlyoutItem>-->
    <!--<FlyoutItem Title="Scan Driving Licence" Icon="ic_outline_document_scanner_black_24.png">
        <ShellContent Route="ScanDrivingLicencePage" ContentTemplate="{DataTemplate local:ScanDrivingLicencePage}" />
    </FlyoutItem>-->
    <!--<FlyoutItem Title="Scan Voucher" Icon="ic_outline_document_scanner_black_24.png">
        <ShellContent Route="ScanVoucherPage" ContentTemplate="{DataTemplate local:ScanVoucherPage}" />
    </FlyoutItem>-->

    <!-- When the Flyout is visible this will be a menu item you can tie a click behavior to  -->
    <MenuItem Text="Coupons" x:Name="Coupons" StyleClass="MenuItemLayoutStyle" Clicked="Coupons_Clicked" IconImageSource="ic_menu_end_shift.png" Shell.FlyoutItemIsVisible="{Binding IsVisibleCoupons}">
    </MenuItem>
    <MenuItem Text="Rydo" x:Name="Rydo" Shell.FlyoutItemIsVisible="{Binding IsVisibleRydo}" StyleClass="MenuItemLayoutStyle" Clicked="Rydo_Clicked" IconImageSource="ic_menu_rydo.png">
    </MenuItem>
    <MenuItem Text="Licence Scan" x:Name="ScanDrivingLicence" Shell.FlyoutItemIsVisible="{Binding IsVisibleDrivingLicenceScan}" StyleClass="MenuItemLayoutStyle" Clicked="ScanDrivingLicence_Clicked" IconImageSource="ic_menu_licence_scan.png">
    </MenuItem>
    <MenuItem Text="Voucher Scan" x:Name="ScanVoucher" Shell.FlyoutItemIsVisible="{Binding IsVisibleVoucherScan}" StyleClass="MenuItemLayoutStyle" Clicked="ScanVoucher_Clicked" IconImageSource="ic_menu_voucher_scan.png">
    </MenuItem>
    <MenuItem Text="Settings" x:Name="Settings" StyleClass="MenuItemLayoutStyle" Clicked="Settings_Clicked" IconImageSource="ic_menu_settings.png" Shell.FlyoutItemIsVisible="{Binding IsVisibleSettings}">
    </MenuItem>
    <!--<MenuItem Text="Job History" x:Name="JobHistory" StyleClass="MenuItemLayoutStyle" Clicked="JobHistory_Clicked"  IconImageSource="ic_menu_end_shift.png" Shell.FlyoutItemIsVisible="{Binding IsVisibleJobHistory}">
    </MenuItem>-->
    <!--<MenuItem Text="My Account" x:Name="MyAccount" StyleClass="MenuItemLayoutStyle" Clicked="MyAccount_Clicked" IconImageSource="ic_menu_settings.png" Shell.FlyoutItemIsVisible="{Binding IsVisibleMyAccount}">
    </MenuItem>-->
    <!--<MenuItem Text="My Shifts" x:Name="MyShifts" StyleClass="MenuItemLayoutStyle" Clicked="MyShifts_Clicked" IconImageSource="ic_menu_voucher_scan.png" Shell.FlyoutItemIsVisible="{Binding IsVisibleMyShifts}">
    </MenuItem>-->
    <MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="LogoutClicked">
    </MenuItem>

    <!--
        TabBar lets you define content that won't show up in a flyout menu. When this content is active
        the flyout menu won't be available. This is useful for creating areas of the application where 
        you don't want users to be able to navigate away from. If you would like to navigate to this 
        content you can do so by calling 
        await Shell.Current.GoToAsync("//LoginPage");
    -->
    <TabBar>
        <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
    </TabBar>

    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.3*,0.9*" BackgroundColor="{StaticResource Primary}" HeightRequest="122" Padding="16">
                <Image Source="driver.png"
                       VerticalOptions="End"/>
                <StackLayout Grid.Column="1" Orientation="Vertical" VerticalOptions="End" Padding="0" Spacing="0">
                    <Label Text="{Binding DriverName}" TextColor="White" Margin="0" Padding="0"/>
                    <Label Text="{Binding DriverMobileNumber}" TextColor="White" FontSize="20" Margin="0" Padding="0"/>
                    <Label Text="{Binding VersionNumber}" TextColor="White" FontSize="15" Margin="0" Padding="0" />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*" BackgroundColor="#FFFFFF" Padding="8">
                <Image Source="{Binding FlyoutIcon}"
                       HeightRequest="24"
                       Aspect="AspectFit"/>
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       TextColor="Black"
                       FontSize="24"
                       VerticalTextAlignment="Start" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*" BackgroundColor="#FFFFFF" Padding="8">
                <Image Source="{Binding Icon}"
                       HeightRequest="24"
                       WidthRequest="24"
                       Aspect="AspectFit"/>
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       TextColor="Black"
                       FontSize="24"
                       VerticalTextAlignment="Start" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>

    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Label BackgroundColor="#FFFFFF"
                   Text="Privacy Policy"
                   TextColor="Black"
                   FontSize="16"
                   Padding="16"
                   HorizontalTextAlignment="Center">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding PrivacyPolicyClickCommand}" />
                </Label.GestureRecognizers>
            </Label>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
    <!-- Optional Templates 
    // These may be provided inline as below or as separate classes.

    // This header appears at the top of the Flyout.
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-header
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid>ContentHere</Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

    // ItemTemplate is for ShellItems as displayed in a Flyout
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance
    <Shell.ItemTemplate>
        <DataTemplate>
            <ContentView>
                Bindable Properties: Title, Icon
            </ContentView>
        </DataTemplate>
    </Shell.ItemTemplate>

    // MenuItemTemplate is for MenuItems as displayed in a Flyout
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <ContentView>
                Bindable Properties: Text, Icon
            </ContentView>
        </DataTemplate>
    </Shell.MenuItemTemplate>

    -->

</Shell>