MainWindow.xaml

<Window x:Class="TidyWindow.App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:TidyWindow.App.ViewModels"
        xmlns:converters="clr-namespace:TidyWindow.App.Converters"
        xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
        mc:Ignorable="d"
        Title="TidyWindow"
        x:Name="RootWindow"
        Width="1024"
        Height="640"
        MinWidth="900"
        MinHeight="540"
        WindowStyle="None"
        AllowsTransparency="False"
        Background="{DynamicResource ShellBackgroundBrush}"
        UseLayoutRounding="True"
        SnapsToDevicePixels="True"
        TextOptions.TextFormattingMode="Display"
        TextOptions.TextRenderingMode="ClearType"
        TextOptions.TextHintingMode="Fixed"
        RenderOptions.BitmapScalingMode="HighQuality">
    <WindowChrome.WindowChrome>
        <shell:WindowChrome CaptionHeight="0"
                            CornerRadius="0"
                            GlassFrameThickness="0"
                            ResizeBorderThickness="6"
                            UseAeroCaptionButtons="False"/>
    </WindowChrome.WindowChrome>
    <Window.Resources>
        <SolidColorBrush x:Key="ShellBackgroundBrush"
                         Color="#0B1120"/>
        <SolidColorBrush x:Key="NavBackgroundBrush"
                         Color="#111827"/>
        <SolidColorBrush x:Key="NavForegroundBrush"
                         Color="#F8FAFC"/>
        <SolidColorBrush x:Key="NavMutedBrush"
                         Color="#94A3B8"/>
        <SolidColorBrush x:Key="NavSubtleBrush"
                         Color="#64748B"/>
        <SolidColorBrush x:Key="NavSelectedTextBrush"
                         Color="#07111D"/>
        <SolidColorBrush x:Key="AccentBrush"
                         Color="#22C55E"/>
        <SolidColorBrush x:Key="HoverBrush"
                         Color="#7C3AED66"/>
        <SolidColorBrush x:Key="SurfaceBrush"
                         Color="#151F32"/>
        <SolidColorBrush x:Key="ContentBackgroundBrush"
                         Color="#0F172A"/>
        <SolidColorBrush x:Key="TitleBarBrush"
                 Color="#101828"/>
        <SolidColorBrush x:Key="TitleBarBorderBrush"
                 Color="#1F2937"/>
        <SolidColorBrush x:Key="TitleBarButtonHoverBrush"
                 Color="#1E2332"/>
        <SolidColorBrush x:Key="TitleBarButtonPressedBrush"
                 Color="#2B3245"/>
        <SolidColorBrush x:Key="TitleBarCloseHoverBrush"
                 Color="#8B1D27"/>
        <SolidColorBrush x:Key="TitleBarClosePressedBrush"
                 Color="#BD1F2D"/>
        <DropShadowEffect x:Key="LoadingCardShadow"
                          Color="#000000"
                          BlurRadius="24"
                          ShadowDepth="0"
                          Opacity="0.45"/>
        <QuarticEase x:Key="SpinnerEase"
                     EasingMode="EaseInOut"/>
        <Style x:Key="TitleBarButtonStyle"
               TargetType="Button">
            <Setter Property="Width" Value="44"/>
            <Setter Property="Height" Value="36"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#F8FAFC"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="ButtonRoot"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Setter TargetName="ButtonRoot"
                                        Property="Background"
                                        Value="{StaticResource TitleBarButtonHoverBrush}"/>
                            </Trigger>
                            <Trigger Property="IsPressed"
                                     Value="True">
                                <Setter TargetName="ButtonRoot"
                                        Property="Background"
                                        Value="{StaticResource TitleBarButtonPressedBrush}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled"
                                     Value="False">
                                <Setter Property="Opacity"
                                        Value="0.45"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TitleBarCloseButtonStyle"
               BasedOn="{StaticResource TitleBarButtonStyle}"
               TargetType="Button">
            <Setter Property="Foreground" Value="#FEE2E2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="ButtonRoot"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="ButtonRoot"
                                        Property="Background"
                                        Value="{StaticResource TitleBarCloseHoverBrush}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="ButtonRoot"
                                        Property="Background"
                                        Value="{StaticResource TitleBarClosePressedBrush}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.45"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <converters:NavigationWidthConverter x:Key="NavWidthConverter"
                         Ratio="0.23"
                         MinWidth="220"
                         MaxWidth="340"/>
    </Window.Resources>
        <Grid x:Name="RootGrid"
            Background="{DynamicResource ShellBackgroundBrush}"
            RenderOptions.BitmapScalingMode="HighQuality">
        <Grid.RowDefinitions>
            <RowDefinition Height="44"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0"
                x:Name="TitleBar"
                Background="{DynamicResource TitleBarBrush}"
                BorderBrush="{DynamicResource TitleBarBorderBrush}"
                BorderThickness="0,0,0,1"
                MouseLeftButtonDown="TitleBar_OnMouseLeftButtonDown">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Grid.Column="0"
                                      Grid.ColumnSpan="2"
                                      Margin="12,0,8,0"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Center"
                                      Content="{Binding TitleBarContent}"
                                      IsHitTestVisible="True"/>
                    <StackPanel Grid.Column="1"
                            Orientation="Horizontal"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            Margin="0,0,8,0">
                    <Button x:Name="MinimizeButton"
                            Style="{StaticResource TitleBarButtonStyle}"
                            Click="MinimizeButton_OnClick">
                        <TextBlock FontFamily="Segoe MDL2 Assets"
                                   FontSize="12"
                                   Text="&#xE921;"/>
                    </Button>
                    <Button x:Name="MaximizeButton"
                            Style="{StaticResource TitleBarButtonStyle}"
                            Click="MaximizeButton_OnClick">
                        <TextBlock x:Name="MaximizeGlyph"
                                   FontFamily="Segoe MDL2 Assets"
                                   FontSize="12"
                                   Text="&#xE922;"/>
                    </Button>
                    <Button x:Name="CloseButton"
                            Style="{StaticResource TitleBarCloseButtonStyle}"
                            Click="CloseButton_OnClick">
                        <TextBlock FontFamily="Segoe MDL2 Assets"
                                   FontSize="12"
                                   Text="&#xE8BB;"/>
                    </Button>
                </StackPanel>
            </Grid>
        </Border>
        <DockPanel Grid.Row="1"
                   Background="{DynamicResource ShellBackgroundBrush}">
            <StatusBar DockPanel.Dock="Bottom"
                       Background="{DynamicResource NavBackgroundBrush}"
                       Foreground="{DynamicResource NavForegroundBrush}">
                <StatusBarItem>
                    <TextBlock Text="{Binding StatusMessage}"/>
                </StatusBarItem>
            </StatusBar>

            <Border DockPanel.Dock="Left"
                    MinWidth="220"
                    MaxWidth="340"
                    Width="{Binding ElementName=RootWindow, Path=ActualWidth, Converter={StaticResource NavWidthConverter}}"
                    Background="{DynamicResource NavBackgroundBrush}"
                    BorderBrush="#1E293B"
                    BorderThickness="0,0,1,0">
                <DockPanel>
                    <StackPanel Margin="20"
                                DockPanel.Dock="Top">
                        <TextBlock Text="TidyWindow"
                                   FontSize="24"
                                   FontWeight="Bold"
                                   FontFamily="Segoe UI Semibold"
                                   Foreground="{DynamicResource NavForegroundBrush}"/>
                        <TextBlock FontSize="11"
                                   FontWeight="SemiBold"
                                   TextOptions.TextFormattingMode="Ideal"
                                   Foreground="{DynamicResource NavSubtleBrush}"
                                   Text="SYSTEM CARE COCKPIT"/>
                    </StackPanel>
                    <ListBox ItemsSource="{Binding NavigationItems}"
                             SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                             BorderThickness="0"
                             Background="Transparent"
                             Foreground="{DynamicResource NavForegroundBrush}"
                             Margin="12"
                             FontFamily="Segoe UI"
                             ScrollViewer.VerticalScrollBarVisibility="Auto"
                             ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Padding"
                                        Value="0"/>
                                <Setter Property="HorizontalContentAlignment"
                                        Value="Stretch"/>
                                <Setter Property="Background"
                                        Value="Transparent"/>
                                <Setter Property="Foreground"
                                        Value="#E2E8F0"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <Border x:Name="ItemBorder"
                                                    CornerRadius="6"
                                                    Background="Transparent">
                                                <ContentPresenter/>
                                            </Border>
                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsSelected"
                                                         Value="True">
                                                    <Setter TargetName="ItemBorder"
                                                            Property="Background"
                                                            Value="{DynamicResource AccentBrush}"/>
                                                    <Setter Property="Foreground"
                                                            Value="#07111D"/>
                                                </Trigger>
                                                <Trigger Property="IsMouseOver"
                                                         Value="True">
                                                    <Setter TargetName="ItemBorder"
                                                            Property="Background"
                                                            Value="{DynamicResource HoverBrush}"/>
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemTemplate>
                            <DataTemplate DataType="{x:Type vm:NavigationItemViewModel}">
                                <StackPanel Margin="16,10" ToolTipService.ToolTip="{Binding Description}" Orientation="Horizontal">
                                    <TextBlock Text="{Binding IconGlyph}"
                                               FontSize="16"
                                               FontFamily="Segoe MDL2 Assets"
                                               VerticalAlignment="Center"
                                               Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Foreground}"/>
                                    <TextBlock Margin="8,0,0,0"
                                               Text="{Binding Title}"
                                               FontSize="15"
                                               FontFamily="Segoe UI Semibold"
                                               VerticalAlignment="Center"
                                               Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Foreground}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DockPanel>
            </Border>

            <Border Margin="24"
                    Background="{DynamicResource ContentBackgroundBrush}"
                    CornerRadius="18"
                    Padding="0">
                <Frame x:Name="ContentFrame"
                       NavigationUIVisibility="Hidden"
                       JournalOwnership="OwnsJournal"
                       Margin="0"
                       Background="{DynamicResource SurfaceBrush}"/>
            </Border>
        </DockPanel>

        <Border x:Name="LoadingOverlay"
            Grid.RowSpan="2"
                Visibility="Collapsed"
                Opacity="0"
                Background="#E610172A"
                Panel.ZIndex="40"
                IsHitTestVisible="False">
            <Grid>
                <Border Width="420"
                        Padding="36"
                        CornerRadius="24"
                        Background="{DynamicResource ContentBackgroundBrush}"
                        BorderBrush="#1E2F49"
                        BorderThickness="1"
                        Effect="{StaticResource LoadingCardShadow}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                    <StackPanel>
                        <Canvas Width="72"
                                Height="72"
                                HorizontalAlignment="Center">
                            <Path StrokeThickness="6"
                                  Stroke="#38BDF8"
                                  StrokeStartLineCap="Round"
                                  StrokeEndLineCap="Round"
                                  Data="M36,6 A30,30 0 1 1 35.99,6">
                                <Path.RenderTransform>
                                    <RotateTransform CenterX="36"
                                                     CenterY="36"/>
                                </Path.RenderTransform>
                                <Path.Triggers>
                                    <EventTrigger RoutedEvent="Path.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard RepeatBehavior="Forever">
                                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                                 From="0"
                                                                 To="360"
                                                                 Duration="0:0:1.6"
                                                                 EasingFunction="{StaticResource SpinnerEase}"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Path.Triggers>
                            </Path>
                        </Canvas>
                        <TextBlock Text="Warming up the cockpit..."
                                   FontSize="20"
                                   FontWeight="SemiBold"
                                   Foreground="#F8FAFC"
                                   HorizontalAlignment="Center"
                                   Margin="0,18,0,0"/>
                        <TextBlock Text="Preparing modules and fetching your automation suite."
                                   FontSize="13"
                                   Foreground="#94A3B8"
                                   TextAlignment="Center"
                                   TextWrapping="Wrap"
                                   Margin="0,6,0,0"/>
                        <Border Height="6"
                                Margin="0,28,0,0"
                                Background="#14243A"
                                CornerRadius="3"
                                ClipToBounds="True">
                            <Grid>
                                <Rectangle Width="160"
                                           Fill="#38BDF8">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform X="-200"/>
                                    </Rectangle.RenderTransform>
                                    <Rectangle.Triggers>
                                        <EventTrigger RoutedEvent="Rectangle.Loaded">
                                            <BeginStoryboard>
                                                <Storyboard RepeatBehavior="Forever">
                                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                                                     From="-220"
                                                                     To="420"
                                                                     Duration="0:0:2.35"
                                                                     EasingFunction="{StaticResource SpinnerEase}"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Rectangle.Triggers>
                                </Rectangle>
                            </Grid>
                        </Border>
                    </StackPanel>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Window>