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

<UserControl
    x:Class="Ursa.Demo.Views.MainView"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:iri="https://irihi.tech/shared"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:u="https://irihi.tech/ursa"
    xmlns:vm="using:Ursa.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="vm:MainViewViewModel"
    mc:Ignorable="d">

    <Design.DataContext>
        <vm:MainViewViewModel />
    </Design.DataContext>
    <UserControl.Resources>
        <converters:IconNameToPathConverter x:Key="IconConverter" />
    </UserControl.Resources>
    <Panel>
        <Panel.Styles>
            <Style Selector="Grid.Blur">
                <Setter Property="Effect" Value="blur(10)" />
            </Style>
        </Panel.Styles>
        <Grid Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}" ColumnDefinitions="Auto, *">
            <Border
                Padding="8,4"
                VerticalAlignment="Stretch"
                Theme="{DynamicResource CardBorder}">
                <u:NavMenu
                    Name="menu"
                    CommandBinding="{Binding ActivateCommand}"
                    ExpandWidth="300"
                    SubMenuBinding="{Binding Children}"
                    HeaderBinding="{Binding}"
                    IconBinding="{Binding MenuHeader}"
                    ItemsSource="{Binding Menus.MenuItems}">
                    <u:NavMenu.Styles>
                        <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
                        </Style>
                    </u:NavMenu.Styles>
                    <u:NavMenu.IconTemplate>
                        <DataTemplate x:DataType="x:String">
                            <u:TwoTonePathIcon
                                Width="16"
                                Height="16"
                                ActiveForeground="{DynamicResource SemiBlue5}"
                                ActiveStrokeBrush="{DynamicResource SemiBlue5}"
                                Data="{Binding Converter={StaticResource IconConverter}}"
                                Foreground="{DynamicResource SemiGrey5}"
                                IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
                                StrokeBrush="{DynamicResource SemiGrey5}" />
                        </DataTemplate>
                    </u:NavMenu.IconTemplate>
                    <u:NavMenu.HeaderTemplate>
                        <DataTemplate x:DataType="vm:MenuItemViewModel">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
                                <u:Badge
                                    Margin="8,0,0,0"
                                    HorizontalAlignment="Left"
                                    Header="{Binding Status}"
                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
                            </StackPanel>
                        </DataTemplate>
                    </u:NavMenu.HeaderTemplate>
                    <u:NavMenu.Header>
                        <DockPanel Margin="8 32 8 8" HorizontalAlignment="Center" >
                            <Panel
                                VerticalAlignment="Center"
                                u:NavMenu.CanToggle="True"
                                Background="Transparent"
                                DockPanel.Dock="Left">
                                <iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
                            </Panel>
                            <TextBlock
                                VerticalAlignment="Center"
                                Classes="H4"
                                Margin="16 0 0 0"
                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
                                Text="Ursa"
                                Theme="{DynamicResource TitleTextBlock}" />
                        </DockPanel>
                    </u:NavMenu.Header>
                    <u:NavMenu.Footer>
                        <u:IconButton
                            HorizontalAlignment="Stretch"
                            Classes="Tertiary"
                            Theme="{DynamicResource BorderlessIconButton}">
                            <TextBlock IsVisible="{Binding !#menu.IsHorizontalCollapsed}" Text="Settings" />
                            <u:IconButton.Icon>
                                <PathIcon Data="{StaticResource SemiIconSetting}" Theme="{StaticResource InnerPathIcon}" />
                            </u:IconButton.Icon>
                            <Button.Flyout>
                                <Flyout Placement="RightEdgeAlignedBottom">
                                    <u:Form LabelPosition="Left">
                                        <ComboBox
                                            MinWidth="100"
                                            u:FormItem.Label="ThemeVariant"
                                            DisplayMemberBinding="{Binding Name}"
                                            ItemsSource="{Binding Themes}"
                                            PlaceholderText="Select a theme"
                                            SelectedItem="{Binding SelectedTheme}" />
                                    </u:Form>
                                </Flyout>
                            </Button.Flyout>
                        </u:IconButton>
                    </u:NavMenu.Footer>
                </u:NavMenu>
            </Border>
            <ContentControl
                Grid.Column="1"
                Margin="12,36,12,12"
                Content="{Binding Content}">
                <ContentControl.ContentTemplate>
                    <converters:ViewLocator />
                </ContentControl.ContentTemplate>
            </ContentControl>
        </Grid>
    </Panel>
</UserControl>