Clario/Clario/Views/MainView.axaml

<UserControl 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="using:Clario.ViewModels"
             xmlns:views="clr-namespace:Clario.Views"
             mc:Ignorable="d" d:DesignWidth="1400" d:DesignHeight="800"
             x:Class="Clario.Views.MainView"
             x:DataType="vm:MainViewModel"
             x:Name="MainControl"
             Background="{DynamicResource BgBase}">
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>
    <Grid ColumnDefinitions="220,*">
        <!-- SIDEBAR  -->
        <Border Grid.Column="0" Background="{DynamicResource BgSidebar}" BorderBrush="{DynamicResource BorderSubtle}"
                BorderThickness="0,0,1,0" Padding="16,28,16,24" IsEnabled="{Binding !IsTransactionFormVisible}">
            <DockPanel>
                <!-- Logo / App Name -->
                <StackPanel DockPanel.Dock="Top" Margin="0,0,0,24">
                </StackPanel>
                <!-- User Profile (bottom) -->
                <Border DockPanel.Dock="Bottom" Background="{DynamicResource BgSurface}" CornerRadius="{StaticResource RadiusInset}"
                        Padding="12,10">
                    <Grid ColumnDefinitions="*,Auto">
                        <Grid Grid.Column="0" ColumnDefinitions="Auto,*" ColumnSpacing="10">
                            <Panel Grid.Column="0">

                                <Border CornerRadius="40"
                                        ClipToBounds="True"
                                        Width="34"
                                        Height="34"
                                        IsVisible="{Binding Profile.HasAvatar}">
                                    <Image Source="{Binding Profile.Avatar}"
                                           Stretch="UniformToFill" />
                                </Border>
                                <Border Background="{DynamicResource BorderAccent}" CornerRadius="{StaticResource RadiusPill}" Width="34"
                                        Height="34" IsVisible="{Binding !Profile.HasAvatar}">
                                    <TextBlock Text="{Binding Profile.DisplayName[0]}" FontSize="{StaticResource FontSizeAmount}" FontWeight="Bold"
                                               Foreground="{DynamicResource AccentBlue}" HorizontalAlignment="Center"
                                               VerticalAlignment="Center" />
                                </Border>
                            </Panel>
                            <TextBlock Grid.Column="1" Text="{Binding Profile.DisplayName}" TextTrimming="CharacterEllipsis"
                                       FontSize="{StaticResource FontSizeBody}"
                                       FontWeight="SemiBold"
                                       VerticalAlignment="Center"
                                       Foreground="{DynamicResource TextSecondary}" />
                        </Grid>
                        <!-- <Button Grid.Column="1" Classes="base" Width="24" Height="24" Padding="2" Command="{Binding SignOutCommand}"> -->
                        <!--    <ToolTip.Tip> -->
                        <!--        signout -->
                        <!--    </ToolTip.Tip> -->
                        <!-- </Button> -->
                    </Grid>
                </Border>
                <!-- Navigation -->
                <StackPanel DockPanel.Dock="Top" Spacing="4">
                    <TextBlock Classes="label" Text="MAIN" Margin="12,0,0,10" />

                    <Button Classes="nav" Classes.active="{Binding isOnDashboard}" HorizontalAlignment="Stretch" Command="{Binding GoToDashboardCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/layout-dashboard.svg" Height="14" Width="14" />
                            <TextBlock Text="Dashboard" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <Button Classes="nav"
                            Classes.active="{Binding isOnTransactions}"
                            HorizontalAlignment="Stretch" Command="{Binding GoToTransactionsCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/arrow-right-left.svg" Height="14" Width="14" />
                            <TextBlock Text="Transactions" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <Button Classes="nav" HorizontalAlignment="Stretch" Classes.active="{Binding isOnAccounts}" Command="{Binding GoToAccountsCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/chart-pie.svg" Height="14" Width="14" />
                            <TextBlock Text="Accounts" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <Button Classes="nav" HorizontalAlignment="Stretch" Classes.active="{Binding isOnBudget}" Command="{Binding GoToBudgetCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/wallet.svg" Height="14" Width="14" />
                            <TextBlock Text="Budgets" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <TextBlock Classes="label" Text="REPORTS" Margin="12,20,0,10" />
                    <Button Classes="nav" HorizontalAlignment="Stretch"
                            Classes.active="{Binding isOnAnalytics}"
                            Command="{Binding GoToAnalyticsCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/chart-no-axes-combined.svg" Height="14" Width="14" />
                            <TextBlock Text="Analytics" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <TextBlock Classes="label" Text="SYSTEM" Margin="12,20,0,10" />
                    <Button Classes="nav" HorizontalAlignment="Stretch" Classes.active="{Binding isOnSettings}" Command="{Binding GoToSettingsCommand}">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Svg Path="../Assets/Icons/settings.svg" Height="14" Width="14" />
                            <TextBlock Text="Settings" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                </StackPanel>
            </DockPanel>
        </Border>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Background="#70000000" IsVisible="{Binding IsDimmed}" />
        <Grid Grid.Column="1">
            <ContentControl Content="{Binding CurrentView}" />
            <views:TransactionFormView
                DataContext="{Binding TransactionFormViewModel}"
                IsVisible="{Binding DataContext.IsTransactionFormVisible,ElementName=MainControl}" />
            <views:AccountFormView
                DataContext="{Binding AccountFormViewModel}"
                IsVisible="{Binding DataContext.IsAccountFormVisible,ElementName=MainControl}" />
            <views:BudgetFormView
                DataContext="{Binding BudgetFormViewModel}"
                IsVisible="{Binding DataContext.IsBudgetFormVisible, ElementName=MainControl}" />
            <views:SetSavingsGoalDialogView
                DataContext="{Binding SetSavingsGoalDialogViewModel}"
                IsVisible="{Binding DataContext.IsSavingsGoalDialogVisible, ElementName=MainControl}" />
            <views:CategoryFormView
                DataContext="{Binding CategoryFormViewModel}"
                IsVisible="{Binding DataContext.IsCategoryFormVisible, ElementName=MainControl}" />
            <views:MessageBoxView
                DataContext="{Binding MessageBoxViewModel}"
                IsVisible="{Binding DataContext.IsMessageBoxVisible, ElementName=MainControl}" />
        </Grid>
    </Grid>


</UserControl>