Update Drawer to match upstream design (#790)

* feat: update DrawerPage and related resources for improved layout and functionality

* feat: enable mouse swipe gesture for Drawer control.

* chore: remove useless resources.

* chore: remove useless Style.

* chore: using TemplateBinding.

* fix: using InnerPathIcon theme for Icon.

* fix: use normal Binding.

---------

Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>

demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml

@@ -23,6 +23,13 @@
                           Content="Gesture Enabled"
                           IsChecked="True"
                           IsCheckedChanged="OnGestureChanged" />
+                
+                <ComboBox SelectionChanged="OnLayoutChanged" >
+                    <ComboBoxItem Content="CompactOverlay" />
+                    <ComboBoxItem Content="CompactInline" />
+                    <ComboBoxItem Content="Split" />
+                    <ComboBoxItem Content="Overlay" />
+                </ComboBox>
 
                 <Separator />
 
@@ -35,38 +42,36 @@
         </ScrollViewer>
 
         <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
+        
-        <Border Margin="12"
+        <DrawerPage Name="DemoDrawer"
-                BorderBrush="{DynamicResource SemiColorBorder}"
+                    Margin="12"
-                BorderThickness="1"
+                    Header="First Look"
-                CornerRadius="6"
+                    DrawerLayoutBehavior="Overlay"
-                ClipToBounds="True">
+                    CompactDrawerLength="80"
-            <DrawerPage Name="DemoDrawer"
+                    DrawerLength="250">
-                        Header="First Look"
+            <DrawerPage.DrawerHeader>
-                        DrawerLength="250">
+                <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
-                <DrawerPage.DrawerHeader>
+            </DrawerPage.DrawerHeader>
-                    <Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
+            <DrawerPage.DrawerFooter>
-                        <TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock HorizontalAlignment="Center" Text="Powered by IRIHI" Margin="8" />
-                    </Border>
+            </DrawerPage.DrawerFooter>
-                </DrawerPage.DrawerHeader>
+            <DrawerPage.Drawer>
-                <DrawerPage.Drawer>
+                <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
-                    <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
+                    <ListBoxItem Content="Home" />
-                        <ListBoxItem Content="Home" />
+                    <ListBoxItem Content="Settings" />
-                        <ListBoxItem Content="Settings" />
+                    <ListBoxItem Content="Profile" />
-                        <ListBoxItem Content="Profile" />
+                    <ListBoxItem Content="About" />
-                        <ListBoxItem Content="About" />
+                </ListBox>
-                    </ListBox>
+            </DrawerPage.Drawer>
-                </DrawerPage.Drawer>
+            <DrawerPage.Content>
-                <DrawerPage.Content>
+                <ContentPage Header="Home">
-                    <ContentPage Header="Home">
+                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
-                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
+                        <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
-                            <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
+                        <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
-                            <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
+                                   FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
-                                       FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
+                    </StackPanel>
-                        </StackPanel>
+                </ContentPage>
-                    </ContentPage>
+            </DrawerPage.Content>
-                </DrawerPage.Content>
+        </DrawerPage>
-            </DrawerPage>
-        </Border>
     </DockPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs

@@ -1,8 +1,9 @@
 using System;
+using System.Linq;
 using Avalonia.Controls;
+using Avalonia.Input.GestureRecognizers;
 using Avalonia.Interactivity;
 using Avalonia.Layout;
-using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,6 +12,7 @@ public partial class DrawerPageDemo : UserControl
     public DrawerPageDemo()
     {
         InitializeComponent();
+        EnableMouseSwipeGesture(DemoDrawer);
     }
 
     protected override void OnLoaded(RoutedEventArgs e)
@@ -52,7 +54,6 @@ public partial class DrawerPageDemo : UserControl
                     FontSize = 16,
                     HorizontalAlignment = HorizontalAlignment.Center,
                     VerticalAlignment = VerticalAlignment.Center,
-                    Foreground = Brushes.Black,
                 },
                 HorizontalContentAlignment = HorizontalAlignment.Stretch,
                 VerticalContentAlignment = VerticalAlignment.Stretch
@@ -65,4 +66,25 @@ public partial class DrawerPageDemo : UserControl
     {
         StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
     }
+
+    private static void EnableMouseSwipeGesture(Control control)
+    {
+        var recognizer = control.GestureRecognizers
+            .OfType<SwipeGestureRecognizer>()
+            .FirstOrDefault();
+
+        recognizer?.IsMouseEnabled = true;
+    }
+
+    private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
+        {
+            0 => DrawerLayoutBehavior.CompactOverlay,
+            1 => DrawerLayoutBehavior.CompactInline,
+            2 => DrawerLayoutBehavior.Split,
+            3 => DrawerLayoutBehavior.Overlay,
+            _ => DrawerLayoutBehavior.CompactOverlay
+        };
+    }
 }

src/Semi.Avalonia/Controls/DrawerPage.axaml

@@ -1,6 +1,4 @@
-<ResourceDictionary
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
         <DrawerPage Width="400" Height="300" />
     </Design.PreviewWith>
@@ -8,142 +6,247 @@
     <ControlTheme x:Key="{x:Type DrawerPage}" TargetType="DrawerPage">
         <Setter Property="Background" Value="{DynamicResource DrawerPageBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource DrawerPageForeground}" />
-        <Setter Property="DrawerBackground" Value="{DynamicResource DrawerPageDrawerBackground}" />
-        <Setter Property="DrawerLength" Value="{DynamicResource DrawerPageDrawerLength}" />
-        <Setter Property="CompactDrawerLength" Value="{DynamicResource DrawerPageCompactDrawerLength}" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DrawerPage">
-                <Grid RowDefinitions="Auto,*" Background="{TemplateBinding Background}">
+                <SplitView
-
+                    Name="PART_SplitView"
-                    <!--  Top bar with pane toggle button  -->
+                    CompactPaneLength="{TemplateBinding CompactDrawerLength}"
-                    <Border
+                    DisplayMode="{TemplateBinding DisplayMode}"
-                        Name="PART_TopBar"
+                    IsPaneOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                        Grid.Row="0"
+                    OpenPaneLength="{TemplateBinding DrawerLength}"
-                        MinHeight="{DynamicResource DrawerPageTopBarMinHeight}"
+                    PaneBackground="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
-                        Padding="{DynamicResource DrawerPageTopBarPadding}"
+                    <SplitView.Pane>
-                        Background="{DynamicResource DrawerPageTopBarBackground}"
+                        <DockPanel Background="{TemplateBinding DrawerBackground}">
-                        BorderBrush="{DynamicResource DrawerPageTopBarBorderBrush}"
+                            <!--  Compact-mode toggle: visible only in CompactOverlay/CompactInline.  -->
-                        BorderThickness="{DynamicResource DrawerPageTopBarBorderThickness}">
-                        <Grid ColumnDefinitions="Auto,Auto,*">
-                            <!--  Pane toggle button (hamburger)  -->
                             <ToggleButton
-                                Name="PART_PaneButton"
+                                Name="PART_CompactPaneToggle"
-                                Grid.Column="0"
+                                Width="{DynamicResource ButtonDefaultHeight}"
-                                Width="{DynamicResource DrawerPagePaneButtonSize}"
+                                Height="{DynamicResource ButtonDefaultHeight}"
-                                Height="{DynamicResource DrawerPagePaneButtonSize}"
+                                HorizontalAlignment="Left"
-                                Margin="{DynamicResource DrawerPagePaneButtonMargin}"
+                                AutomationProperties.Name="Toggle navigation drawer"
-                                VerticalAlignment="Center"
+                                Background="Transparent"
-                                Background="{DynamicResource DrawerPagePaneButtonBackground}"
+                                DockPanel.Dock="Top"
-                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}">
+                                IsVisible="False"
-                                <PathIcon
+                                ToolTip.Tip="Toggle navigation drawer">
-                                    Width="16"
+                                <Panel>
-                                    Height="16"
+                                    <PathIcon
-                                    Data="{DynamicResource DrawerPageMenuGlyph}"
+                                        HorizontalAlignment="Center"
-                                    Foreground="{DynamicResource DrawerPagePaneButtonForeground}" />
+                                        VerticalAlignment="Center"
-                            </ToggleButton>
+                                        Data="{DynamicResource DrawerPageMenuGlyph}"
-
+                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                            <!--  Drawer icon (shown in top bar)  -->
+                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
-                            <ContentPresenter
+                                        Theme="{DynamicResource InnerPathIcon}" />
-                                Name="PART_PaneIconPresenter"
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Content="{TemplateBinding DrawerIcon}"
-                                ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
-                        </Grid>
-                    </Border>
-
-                    <!--  Main area: SplitView + Backdrop  -->
-                    <Panel Grid.Row="1">
-                        <SplitView
-                            Name="PART_SplitView"
-                            CompactPaneLength="{TemplateBinding CompactDrawerLength}"
-                            DisplayMode="{TemplateBinding DisplayMode}"
-                            IsPaneOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
-                            OpenPaneLength="{TemplateBinding DrawerLength}"
-                            PaneBackground="{TemplateBinding DrawerBackground}">
-                            <SplitView.Pane>
-                                <DockPanel>
-                                    <!--  Drawer header  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerHeader"
-                                        DockPanel.Dock="Top"
-                                        Background="{TemplateBinding DrawerHeaderBackground}"
-                                        Content="{TemplateBinding DrawerHeader}"
-                                        ContentTemplate="{TemplateBinding DrawerHeaderTemplate}" />
-
-                                    <!--  Drawer footer  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerFooter"
-                                        DockPanel.Dock="Bottom"
-                                        Background="{TemplateBinding DrawerFooterBackground}"
-                                        Content="{TemplateBinding DrawerFooter}"
-                                        ContentTemplate="{TemplateBinding DrawerFooterTemplate}" />
-
-                                    <!--  Compact pane icon (compact mode)  -->
                                     <ContentPresenter
                                         Name="PART_CompactPaneIconPresenter"
-                                        DockPanel.Dock="Top"
+                                        HorizontalAlignment="Center"
-                                        IsVisible="False"
+                                        VerticalAlignment="Center"
                                         Content="{TemplateBinding DrawerIcon}"
-                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
+                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}"
-
+                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                    <!--  Bottom pane icon  -->
+                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                    <ContentPresenter
+                                </Panel>
-                                        Name="PART_BottomPaneIconPresenter"
+                            </ToggleButton>
-                                        DockPanel.Dock="Bottom"
+                            <ContentPresenter
-                                        IsVisible="False" 
+                                Name="PART_DrawerHeader"
-                                        Content="{TemplateBinding DrawerIcon}"
+                                Background="{TemplateBinding DrawerHeaderBackground}"
-                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
+                                Content="{TemplateBinding DrawerHeader}"
-
+                                ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
-                                    <!--  Drawer main content  -->
+                                DockPanel.Dock="Top"
-                                    <ContentPresenter
+                                IsVisible="{TemplateBinding DrawerHeader,
-                                        Name="PART_DrawerPresenter"
+                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                        Content="{TemplateBinding Drawer}"
+                            <ContentPresenter
-                                        ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                                Name="PART_DrawerFooter"
+                                Background="{TemplateBinding DrawerFooterBackground}"
+                                Content="{TemplateBinding DrawerFooter}"
+                                ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
+                                DockPanel.Dock="Bottom"
+                                IsVisible="{TemplateBinding DrawerFooter,
+                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ContentPresenter
+                                Name="PART_DrawerPresenter"
+                                HorizontalContentAlignment="Stretch"
+                                VerticalContentAlignment="Stretch"
+                                Content="{TemplateBinding Drawer}"
+                                ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                        </DockPanel>
+                    </SplitView.Pane>
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <DockPanel Name="PART_ContentDock">
+                            <Border
+                                Name="PART_TopBar"
+                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
+                                Padding="5"
+                                Background="{DynamicResource DrawerPageTopBarBackground}"
+                                DockPanel.Dock="Top">
+                                <DockPanel HorizontalAlignment="Stretch">
+                                    <ToggleButton
+                                        Name="PART_PaneButton"
+                                        Width="{DynamicResource ButtonDefaultHeight}"
+                                        Height="{DynamicResource ButtonDefaultHeight}"
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        Background="Transparent"
+                                        DockPanel.Dock="Left"
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
+                                        ToolTip.Tip="Toggle navigation drawer">
+                                        <Panel>
+                                            <PathIcon
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                Data="{DynamicResource DrawerPageMenuGlyph}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
+                                                Theme="{DynamicResource InnerPathIcon}" />
+                                            <ContentPresenter
+                                                Name="PART_PaneIconPresenter"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                Content="{TemplateBinding DrawerIcon}"
+                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        </Panel>
+                                    </ToggleButton>
+                                    <ContentControl
+                                        Name="PART_TitlePresenter"
+                                        Margin="8,0,0,0"
+                                        VerticalAlignment="Center"
+                                        VerticalContentAlignment="Center"
+                                        Content="{TemplateBinding Header}"
+                                        FontSize="16"
+                                        FontWeight="SemiBold"
+                                        IsVisible="{TemplateBinding Header,
+                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
                                 </DockPanel>
-                            </SplitView.Pane>
+                            </Border>
-
+                            <Border
-                            <!--  Main page content  -->
+                                Name="PART_BottomBar"
+                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
+                                Padding="5"
+                                Background="{DynamicResource DrawerPageTopBarBackground}"
+                                DockPanel.Dock="Bottom"
+                                IsVisible="False">
+                                <DockPanel HorizontalAlignment="Stretch">
+                                    <ToggleButton
+                                        Name="PART_BottomPaneButton"
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        Background="Transparent"
+                                        DockPanel.Dock="Left"
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
+                                        ToolTip.Tip="Toggle navigation drawer">
+                                        <Panel>
+                                            <PathIcon
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                Data="{DynamicResource DrawerPaneButtonIcon}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
+                                                Theme="{DynamicResource InnerPathIcon}" />
+                                            <ContentPresenter
+                                                Name="PART_BottomPaneIconPresenter"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                Content="{TemplateBinding DrawerIcon}"
+                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        </Panel>
+                                    </ToggleButton>
+                                    <ContentControl
+                                        Name="PART_BottomTitlePresenter"
+                                        Margin="8,0,0,0"
+                                        VerticalAlignment="Center"
+                                        VerticalContentAlignment="Center"
+                                        Content="{TemplateBinding Header}"
+                                        FontSize="16"
+                                        FontWeight="SemiBold"
+                                        IsVisible="{TemplateBinding Header,
+                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                </DockPanel>
+                            </Border>
                             <ContentPresenter
                                 Name="PART_ContentPresenter"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
                                 Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                CornerRadius="{TemplateBinding CornerRadius}" />
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </DockPanel>
-                        </SplitView>
-
-                        <!--  Backdrop overlay (shown in overlay/flyout modes)  -->
                         <Border
                             Name="PART_Backdrop"
                             Background="{TemplateBinding BackdropBrush}"
                             IsHitTestVisible="False"
                             IsVisible="False" />
-
+                    </Grid>
-                        <!--  Compact pane toggle  -->
+                </SplitView>
-                        <ToggleButton
-                            Name="PART_CompactPaneToggle"
-                            IsVisible="False" />
-                    </Panel>
-                </Grid>
             </ControlTemplate>
         </Setter>
 
-        <!--  Pseudo-class: right-side drawer  -->
+        <Style Selector="^:placement-right /template/ ToggleButton#PART_PaneButton">
-        <Style Selector="^:placement-right /template/ SplitView#PART_SplitView">
+            <Setter Property="DockPanel.Dock" Value="Right" />
-            <Setter Property="PanePlacement" Value="Right" />
         </Style>
 
-        <!--  Pseudo-class: top drawer  -->
+        <!--  Bottom placement: swap top bar for bottom bar  -->
-        <Style Selector="^:placement-top /template/ SplitView#PART_SplitView">
+        <Style Selector="^:placement-bottom /template/ Border#PART_TopBar">
-            <Setter Property="PanePlacement" Value="Top" />
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:placement-bottom /template/ Border#PART_BottomBar">
+            <Setter Property="IsVisible" Value="True" />
         </Style>
 
-        <!--  Pseudo-class: bottom drawer  -->
+        <!--  Bottom placement + compact modes: pane compact strip provides toggle, hide bottom bar  -->
-        <Style Selector="^:placement-bottom /template/ SplitView#PART_SplitView">
+        <Style Selector="^:placement-bottom[DisplayMode=CompactOverlay] /template/ Border#PART_BottomBar">
-            <Setter Property="PanePlacement" Value="Bottom" />
+            <Setter Property="IsVisible" Value="False" />
         </Style>
+        <Style Selector="^:placement-bottom[DisplayMode=CompactInline] /template/ Border#PART_BottomBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <!--  Horizontal pane (Bottom/Top): compact toggle must dock Left so drawer content can fill the rest  -->
+        <Style Selector="^:placement-bottom /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+        <Style Selector="^:placement-top /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+
+        <Style Selector="^[DrawerBehavior=Locked] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DrawerBehavior=Disabled] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^:detail-is-navpage /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactOverlay] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactOverlay] /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactInline] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactInline] /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^[IsInNavigationPage=True] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <!--  NavigationPage already hosts a hamburger toggle — suppress the compact pane toggle.  -->
+        <Style Selector="^:detail-is-navpage /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/DrawerPage.axaml

@@ -4,10 +4,6 @@
     <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
     <!--  Top bar  -->
     <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
-    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
-    <!--  Drawer pane  -->
-    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
     <!--  Pane button  -->
-    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
     <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/DrawerPage.axaml

@@ -4,10 +4,6 @@
     <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorWindowText" />
     <!--  Top bar  -->
     <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorWindowText" />
-    <!--  Drawer pane  -->
-    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorWindow" />
     <!--  Pane button  -->
-    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
     <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorWindowText" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/DrawerPage.axaml

@@ -4,10 +4,6 @@
     <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
     <!--  Top bar  -->
     <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
-    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
-    <!--  Drawer pane  -->
-    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
     <!--  Pane button  -->
-    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
     <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml

@@ -1,15 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  DrawerPage top bar  -->
-    <x:Double x:Key="DrawerPageTopBarMinHeight">48</x:Double>
+    <x:Double x:Key="DrawerPageTopBarMinHeight">32</x:Double>
-    <Thickness x:Key="DrawerPageTopBarPadding">4 0</Thickness>
-    <Thickness x:Key="DrawerPageTopBarBorderThickness">0 0 0 1</Thickness>
-
-    <!--  DrawerPage pane/drawer  -->
-    <x:Double x:Key="DrawerPageDrawerLength">280</x:Double>
-    <x:Double x:Key="DrawerPageCompactDrawerLength">56</x:Double>
 
     <!--  DrawerPage pane button  -->
-    <x:Double x:Key="DrawerPagePaneButtonSize">32</x:Double>
-    <Thickness x:Key="DrawerPagePaneButtonMargin">8 0</Thickness>
     <StaticResource x:Key="DrawerPageMenuGlyph" ResourceKey="SemiIconMenu" />
 </ResourceDictionary>