Semi.Avalonia/demo/Semi.Avalonia.Demo/Views/MainView.axaml

<UserControl
    x:Class="Semi.Avalonia.Demo.Views.MainView"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="vm:MainViewModel"
    mc:Ignorable="d">
    <UserControl.Styles>
        <Style Selector="TextBlock.NavSectionHeader">
            <Setter Property="Margin" Value="12,10,12,2" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
        </Style>

        <Style Selector="Border.NavItemHost">
            <Setter Property="Margin" Value="6,0" />
            <Setter Property="Background" Value="Transparent" />
        </Style>

        <Style Selector="Border.NavItemHost.Selected">
            <Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
        </Style>

        <Style Selector="Button.NavItem">
            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Padding" Value="12,8" />
            <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
        </Style>
        <Style Selector="Button.NavItem.Selected">
            <Setter Property="Foreground" Value="{DynamicResource SemiColorPrimary}" />
        </Style>
    </UserControl.Styles>

    <DrawerPage
        Name="MainDrawer"
        Margin="8"
        Background="Transparent"
        Content="{Binding CurrentPage}"
        DrawerLayoutBehavior="{OnFormFactor Split, Mobile=Overlay}"
        DrawerLength="300"
        IsOpen="True">
        <DrawerPage.Header>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <SelectableTextBlock
                    VerticalAlignment="Center"
                    Classes="H6"
                    Text="Semi Avalonia"
                    Theme="{DynamicResource TitleSelectableTextBlock}" />
                <TextBlock VerticalAlignment="Center" Text="/" />
                <SelectableTextBlock
                    VerticalAlignment="Center"
                    Classes="Secondary"
                    Text="{Binding SelectedPageTitle}" />
            </StackPanel>
        </DrawerPage.Header>

        <DrawerPage.DrawerHeader>
            <TextBox
                Margin="8"
                Classes="ClearButton"
                PlaceholderText="Search demos or sections"
                Text="{Binding SearchText}" />
        </DrawerPage.DrawerHeader>

        <DrawerPage.Drawer>
            <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                <StackPanel>
                    <ItemsControl ItemsSource="{Binding FilteredSections}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate DataType="vm:NavigationSectionViewModel">
                                <StackPanel Margin="0,0,0,10">
                                    <TextBlock Classes="NavSectionHeader" Text="{Binding Header}" />
                                    <ItemsControl ItemsSource="{Binding Items}">
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate DataType="vm:NavigationItemViewModel">
                                                <Border Classes="NavItemHost" Classes.Selected="{Binding IsSelected}">
                                                    <Button
                                                        Classes="NavItem"
                                                        Classes.Selected="{Binding IsSelected}"
                                                        Command="{Binding NavigateCommand}"
                                                        CommandParameter="{Binding}"
                                                        Content="{Binding Title}" />
                                                </Border>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <TextBlock
                        Margin="16,12,16,0"
                        Foreground="{DynamicResource SemiColorText1}"
                        IsVisible="{Binding ShowEmptySearchState}"
                        Text="No demo pages matched your search." />
                </StackPanel>
            </ScrollViewer>
        </DrawerPage.Drawer>

        <DrawerPage.DrawerFooter>
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                <Button
                    Command="{Binding OpenUrlCommand}"
                    CommandParameter="{Binding DocumentationUrl}"
                    Content="{StaticResource SemiIconGlobe}"
                    Theme="{DynamicResource IconBorderlessButton}" />

                <Button
                    Command="{Binding OpenUrlCommand}"
                    CommandParameter="{Binding RepoUrl}"
                    Content="{StaticResource SemiIconGithubLogo}"
                    Theme="{DynamicResource IconBorderlessButton}" />

                <ToggleSwitch
                    Command="{Binding ToggleThemeCommand}"
                    OffContent="{StaticResource SemiIconSun}"
                    OnContent="{StaticResource SemiIconMoon}"
                    Theme="{DynamicResource IconBorderlessToggleSwitch}" />

                <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
                    <Button.Flyout>
                        <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
                    </Button.Flyout>
                    <Button.Styles>
                        <Style x:DataType="vm:MenuItemViewModel" Selector="MenuItem">
                            <Setter Property="Header" Value="{Binding Header}" />
                            <Setter Property="ItemsSource" Value="{Binding Items}" />
                            <Setter Property="Command" Value="{Binding Command}" />
                            <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
                        </Style>
                    </Button.Styles>
                </Button>
            </StackPanel>
        </DrawerPage.DrawerFooter>
    </DrawerPage>
</UserControl>