MainWindow.xaml

<ui:FluentWindow x:Class="AmpUp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
        xmlns:mi="clr-namespace:Material.Icons.WPF;assembly=Material.Icons.WPF"
        xmlns:views="clr-namespace:AmpUp.Views"
        xmlns:controls="clr-namespace:AmpUp.Controls"
        Title="Amp Up"
        Icon="Assets/icon/ampup-48.png"
        Width="1600" Height="1000"
        MinWidth="900" MinHeight="600"
        WindowStartupLocation="CenterScreen"
        ExtendsContentIntoTitleBar="True"
        WindowBackdropType="None"
        BorderThickness="0"
        BorderBrush="Transparent"
        Background="{DynamicResource BgBaseBrush}">

    <ui:FluentWindow.Resources>
        <FontFamily x:Key="MaterialSymbols">pack://application:,,,/Fonts/#Material Symbols Outlined</FontFamily>
        <!-- DesiredFrameRate=10: the dot carries a DropShadowEffect, so every animation
             frame forces an effect re-rasterization. 10 FPS is visually identical for a
             1s opacity fade and cuts the render cost to a sixth. -->
        <Storyboard x:Key="PulseAnimation" RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
            <DoubleAnimation Storyboard.TargetName="ConnectionDot"
                             Storyboard.TargetProperty="Opacity"
                             From="1.0" To="0.4" Duration="0:0:1"
                             AutoReverse="True"
                             Timeline.DesiredFrameRate="10" />
        </Storyboard>
        <Style x:Key="SidebarNavButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Margin" Value="10,1" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="NavBorder" Background="Transparent" CornerRadius="10">
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="NavBorder" Property="Background" Value="{DynamicResource AccentHover1ABrush}" />
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter TargetName="NavBorder" Property="Background" Value="{DynamicResource AccentHover1ABrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ui:FluentWindow.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <!-- Title bar area -->
            <RowDefinition Height="48" />
            <!-- Content -->
            <RowDefinition Height="*" />
            <!-- Hardware preview strip (hidden) -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Header Bar (draggable) -->
        <Grid Grid.Row="0" Background="{DynamicResource BgBaseBrush}"
              MouseLeftButtonDown="HeaderBar_MouseLeftButtonDown">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <!-- Branding -->
            <StackPanel Grid.Column="0" Orientation="Horizontal" Margin="14,0,0,0" VerticalAlignment="Center">
                <Image Source="pack://application:,,,/Assets/icon/ampup-48.png" Height="38"
                       RenderOptions.BitmapScalingMode="HighQuality" VerticalAlignment="Center" />
                <TextBlock VerticalAlignment="Center" Margin="6,0,0,0">
                    <Run Text="AMP" FontFamily="Segoe UI Black" FontSize="16" FontWeight="Black"
                         Foreground="#2E8B38" />
                    <Run Text=" " FontSize="4" />
                    <Run Text="UP" FontFamily="Segoe UI Black" FontSize="16" FontWeight="Black"
                         Foreground="#4CAF50" />
                </TextBlock>
            </StackPanel>

            <!-- Connection Status + Window Controls -->
            <StackPanel Grid.Column="2" Orientation="Horizontal" Margin="0,0,12,0" VerticalAlignment="Center">
                <Ellipse x:Name="ConnectionDot" Width="8" Height="8" Fill="{StaticResource TextDimBrush}" Margin="0,0,8,0">
                    <Ellipse.Effect>
                        <DropShadowEffect x:Name="ConnectionDotGlow" Color="#00E676" BlurRadius="0" Opacity="0" ShadowDepth="0" />
                    </Ellipse.Effect>
                </Ellipse>
                <TextBlock x:Name="ConnectionLabel" Text="Disconnected" Style="{StaticResource SecondaryText}" VerticalAlignment="Center" />
                <TextBlock x:Name="VersionLabel" Text="v0.3-alpha" Foreground="{StaticResource TextDimBrush}" FontSize="10"
                           VerticalAlignment="Center" Margin="10,0,0,0" Cursor="Hand"
                           MouseLeftButtonDown="VersionLabel_Click"
                           ToolTip="Click to check for updates" />

                <!-- Traffic-light window buttons -->
                <StackPanel Orientation="Horizontal" Margin="16,0,0,0">
                    <!-- Minimize (yellow) -->
                    <Border x:Name="BtnMinimize" Width="14" Height="14" CornerRadius="7"
                            Background="#FFBD2E" Margin="0,0,8,0" Cursor="Hand"
                            MouseLeftButtonDown="BtnMinimize_Click"
                            ToolTip="Minimize">
                        <TextBlock Text="—" FontSize="8" FontWeight="Bold" Foreground="#995700"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-2,0,0" Opacity="0" x:Name="MinIcon" />
                    </Border>
                    <!-- Maximize (green) -->
                    <Border x:Name="BtnMaximize" Width="14" Height="14" CornerRadius="7"
                            Background="#27C93F" Margin="0,0,8,0" Cursor="Hand"
                            MouseLeftButtonDown="BtnMaximize_Click"
                            ToolTip="Maximize">
                        <TextBlock Text="⤢" FontSize="9" FontWeight="Bold" Foreground="#0A6C15"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-1,0,0" Opacity="0" x:Name="MaxIcon" />
                    </Border>
                    <!-- Close (red) -->
                    <Border x:Name="BtnClose" Width="14" Height="14" CornerRadius="7"
                            Background="#FF5F56" Cursor="Hand"
                            MouseLeftButtonDown="BtnClose_Click"
                            ToolTip="Close">
                        <TextBlock Text="✕" FontSize="8" FontWeight="Bold" Foreground="#990F04"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-1,0,0" Opacity="0" x:Name="CloseIcon" />
                    </Border>
                </StackPanel>
            </StackPanel>
        </Grid>

        <!-- Hardware Preview Strip (Row 2 — always visible, full width) -->
        <controls:HardwarePreview x:Name="HwPreview" Grid.Row="2"
            ToolTip="Live hardware status — click a knob to navigate to Mixer tab"
            Visibility="Collapsed" />

        <!-- Main Layout: fixed 64px rail column + content. The sidebar spans both columns and
             overlays the content when it expands on hover (content never reflows). -->
        <Grid Grid.Row="1" Background="{DynamicResource BgDarkBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- Content Area -->
            <Border Grid.Column="1" Padding="24,16">
                <!-- Not focusable: otherwise Tab / arrow keys land on it and WPF draws a
                     white focus rectangle around the whole page. -->
                <ContentControl x:Name="ContentArea" Focusable="False" IsTabStop="False"
                                FocusVisualStyle="{x:Null}" />
            </Border>

            <!-- Sidebar Navigation (expand-on-hover overlay) -->
            <Border x:Name="SidebarPanel" Grid.Column="0" Grid.ColumnSpan="2" Panel.ZIndex="10"
                    Width="64" HorizontalAlignment="Left"
                    Background="{DynamicResource BgBaseBrush}"
                    BorderBrush="{DynamicResource CardBorderBrush}" BorderThickness="0,0,1,0"
                    MouseEnter="SidebarPanel_MouseEnter" MouseLeave="SidebarPanel_MouseLeave"
                    IsKeyboardFocusWithinChanged="SidebarPanel_IsKeyboardFocusWithinChanged">
                <Grid ClipToBounds="True">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!-- Profile card: avatar only when collapsed, full card when expanded -->
                    <Grid x:Name="ProfileCard" Grid.Row="0" Height="52" Margin="10,10,10,4"
                          Cursor="Hand" ToolTip="Switch profile" Background="Transparent"
                          MouseLeftButtonUp="ProfileButton_Click">
                        <Border x:Name="ProfileCardBg" CornerRadius="12" Opacity="0"
                                Background="{DynamicResource CardBgBrush}"
                                BorderBrush="{DynamicResource CardBorderBrush}" BorderThickness="1" />
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="44" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0" Width="40" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Border x:Name="ProfileButton" Width="40" Height="40" CornerRadius="20"
                                        Background="{DynamicResource CardBgBrush}" BorderThickness="2">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                            <GradientStop Color="#8800E676" Offset="0" />
                                            <GradientStop Color="#4400E676" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                    <mi:MaterialIcon x:Name="ProfileIcon" Kind="AccountCircleOutline"
                                                     Width="20" Height="20" Foreground="{DynamicResource AccentBrush}"
                                                     HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Border>
                                <Border Width="16" Height="16" CornerRadius="8"
                                        Background="{DynamicResource AccentBrush}"
                                        BorderBrush="{DynamicResource BgBaseBrush}" BorderThickness="2"
                                        HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,-3,-3"
                                        IsHitTestVisible="False">
                                    <mi:MaterialIcon Kind="SwapHorizontal" Width="9" Height="9"
                                                     Foreground="{DynamicResource BgDarkBrush}"
                                                     HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Border>
                            </Grid>
                            <StackPanel x:Name="ProfileCardText" Grid.Column="1" Opacity="0"
                                        VerticalAlignment="Center" Margin="8,0,4,0">
                                <TextBlock Text="PROFILE" FontSize="9.5" FontWeight="Bold"
                                           Foreground="{DynamicResource TextDimBrush}" />
                                <TextBlock x:Name="ProfileLabel" Text="Default" FontSize="12.5" FontWeight="Bold"
                                           Foreground="{DynamicResource TextPrimaryBrush}"
                                           TextTrimming="CharacterEllipsis" Margin="0,1,0,0" />
                            </StackPanel>
                            <mi:MaterialIcon x:Name="ProfileCardChevron" Grid.Column="2" Kind="UnfoldMoreHorizontal"
                                             Width="16" Height="16" Margin="0,0,10,0" Opacity="0"
                                             Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Center" />
                        </Grid>
                    </Grid>

                    <!-- ProfilePopupPanel is populated and shown via code-behind Window flyout -->
                    <StackPanel x:Name="ProfilePopupPanel" Visibility="Collapsed" />

                    <DockPanel Grid.Row="1" Margin="0,0,0,10" LastChildFill="True">
                        <!-- Bottom group: Overview + Settings -->
                        <Button x:Name="NavSettings" Style="{StaticResource SidebarNavButton}" Click="NavSettings_Click" DockPanel.Dock="Bottom">
                            <Grid>
                                <Border x:Name="NavSettingsPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavSettingsBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavSettingsIcon" Kind="CogOutline" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavSettingsLabel" Text="Settings" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Button x:Name="NavBindings" Style="{StaticResource SidebarNavButton}" Click="NavBindings_Click" DockPanel.Dock="Bottom" ToolTip="Overview of all knob and button bindings across profiles">
                            <Grid>
                                <Border x:Name="NavBindingsPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavBindingsBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavBindingsIcon" Kind="ViewDashboardOutline" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavBindingsLabel" Text="Overview" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Border Height="1" Margin="20,6" Background="{DynamicResource CardBorderBrush}" DockPanel.Dock="Bottom" />

                        <!-- Nav items: hardware pages, then lighting pages -->
                        <StackPanel>
                        <Grid Height="24" IsHitTestVisible="False">
                            <Border x:Name="SepHardware" Height="1" Margin="20,0" VerticalAlignment="Center" Background="{DynamicResource CardBorderBrush}" />
                            <TextBlock x:Name="CapHardware" Text="HARDWARE" FontSize="10" FontWeight="Bold" Opacity="0"
                                       Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Bottom" Margin="22,0,0,3" />
                        </Grid>
                        <Button x:Name="NavMixer" Style="{StaticResource SidebarNavButton}" Click="NavMixer_Click">
                            <Grid>
                                <Border x:Name="NavMixerPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavMixerBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavMixerIcon" Kind="TuneVertical" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavMixerLabel" Text="Mixer" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Button x:Name="NavButtons" Style="{StaticResource SidebarNavButton}" Click="NavButtons_Click">
                            <Grid>
                                <Border x:Name="NavButtonsPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavButtonsBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavButtonsIcon" Kind="GestureTapButton" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavButtonsLabel" Text="Buttons" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Grid Height="24" IsHitTestVisible="False">
                            <Border x:Name="SepLighting" Height="1" Margin="20,0" VerticalAlignment="Center" Background="{DynamicResource CardBorderBrush}" />
                            <TextBlock x:Name="CapLighting" Text="LIGHTING" FontSize="10" FontWeight="Bold" Opacity="0"
                                       Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Bottom" Margin="22,0,0,3" />
                        </Grid>
                        <Button x:Name="NavLights" Style="{StaticResource SidebarNavButton}" Click="NavLights_Click">
                            <Grid>
                                <Border x:Name="NavLightsPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavLightsBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavLightsIcon" Kind="LightbulbOutline" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavLightsLabel" Text="Lights" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Button x:Name="NavAmbience" Style="{StaticResource SidebarNavButton}" Click="NavAmbience_Click">
                            <Grid>
                                <Border x:Name="NavAmbiencePill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavAmbienceBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavAmbienceIcon" Kind="SofaOutline" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavAmbienceLabel" Text="Room" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Grid Height="24" IsHitTestVisible="False">
                            <Border x:Name="SepApp" Height="1" Margin="20,0" VerticalAlignment="Center" Background="{DynamicResource CardBorderBrush}" />
                            <TextBlock x:Name="CapApp" Text="APP" FontSize="10" FontWeight="Bold" Opacity="0"
                                       Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Bottom" Margin="22,0,0,3" />
                        </Grid>
                        <Button x:Name="NavGroups" Style="{StaticResource SidebarNavButton}" Click="NavGroups_Click" ToolTip="Groups — app groups from the Mixer plus Govee, Corsair and Home Assistant device groups">
                            <Grid>
                                <Border x:Name="NavGroupsPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavGroupsBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavGroupsIcon" Kind="VectorLink" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavGroupsLabel" Text="Groups" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Button x:Name="NavOsd" Style="{StaticResource SidebarNavButton}" Click="NavOsd_Click" ToolTip="OSD Overlay &amp; Quick Wheel settings">
                            <Grid>
                                <Border x:Name="NavOsdPill" CornerRadius="10" Background="Transparent" IsHitTestVisible="False" />
                                <Border x:Name="NavOsdBar" Width="3" Height="0" CornerRadius="2" Opacity="0"
                                        Background="{DynamicResource AccentBrush}" HorizontalAlignment="Left"
                                        VerticalAlignment="Center" Margin="-10,0,0,0" IsHitTestVisible="False" />
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <Grid Width="44">
                                        <mi:MaterialIcon x:Name="NavOsdIcon" Kind="MonitorDashboard" Width="22" Height="22"
                                                         Foreground="{DynamicResource TextSecBrush}" RenderTransformOrigin="0.5,0.5"
                                                         HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <mi:MaterialIcon.RenderTransform><ScaleTransform /></mi:MaterialIcon.RenderTransform>
                                        </mi:MaterialIcon>
                                    </Grid>
                                    <TextBlock x:Name="NavOsdLabel" Text="OSD" FontSize="13" FontWeight="SemiBold"
                                               Foreground="{DynamicResource TextSecBrush}" Opacity="0"
                                               VerticalAlignment="Center" Margin="2,0,0,0" TextTrimming="CharacterEllipsis" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        </StackPanel>
                    </DockPanel>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</ui:FluentWindow>