App.xaml

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FoodPOS"
             x:Class="FoodPOS.App">
    <Application.Resources>
        <ResourceDictionary Source="Resources\Styles\Styles.xaml"/>
    </Application.Resources>

    <Application.MainPage>
        <Shell FlyoutWidth="104" FlyoutBehavior="Locked" >
            <Shell.FlyoutContentTemplate>
                <DataTemplate>
                    <FlexLayout Direction="Column" WidthRequest="104" Background="{StaticResource DarkBg2Brush}"
                                JustifyContent="SpaceBetween">
                        <Image Source="logo.svg" Margin="0,15,0,0"/>
                        <Image Source="home.svg"/>
                        <Image Source="discount.svg"/>
                        <Image Source="graph.svg"/>
                        <Image Source="message.svg"/>
                        <Image Source="notification.svg"/>
                        <Grid RowDefinitions="Auto">
                            <Border Background="{StaticResource DarkBg1Brush}"
                                    Stroke="{StaticResource DarkBg1Brush}" 
                                    StrokeThickness="1"
                                    HorizontalOptions="Fill"
                                    Margin="15,0,0,0">
                                <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="12,0,12,0" />
                                </Border.StrokeShape>                               
                            </Border>
                            <Border Background="{StaticResource PrimaryBrush}"
                                    Margin="20" 
                                    HorizontalOptions="Center" 
                                    VerticalOptions="Center"
                                    Stroke="{StaticResource PrimaryBrush}" 
                                    StrokeThickness="1">
                                <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="8" />
                                </Border.StrokeShape>

                                <Image Source="setting.svg" 
                                       Margin="8"
                                       HorizontalOptions="Center" 
                                       VerticalOptions="Center"/>
                            </Border>
                        </Grid>
                        
                        <Image Source="logout.svg" Margin="0,0,0,15"/>
                    </FlexLayout>
                </DataTemplate>
            </Shell.FlyoutContentTemplate>

            <FlyoutItem>
                <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
            </FlyoutItem>
        </Shell>
    </Application.MainPage>
</Application>