From 32f56623701409db92a7c0f94d6c7062540da0cc Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 14 Feb 2024 00:41:33 +0800
Subject: [PATCH] feat: add header footer to navmenu.

---
 demo/Ursa.Demo/Pages/NavMenuDemo.axaml      | 126 +++++++++++---------
 src/Ursa.Themes.Semi/Controls/NavMenu.axaml |  10 +-
 src/Ursa/Controls/Icons/TwoTonePathIcon.cs  |   9 +-
 src/Ursa/Controls/NavMenu/NavMenu.cs        |  21 ++++
 4 files changed, 97 insertions(+), 69 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
index 504c2eb..fd3b40c 100644
--- a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
+++ b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
@@ -15,69 +15,77 @@
     <UserControl.Resources>
         <converters:IconNameToPathConverter x:Key="IconConverter"/> 
     </UserControl.Resources>
-    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left">
-            <TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
-            <u:NavMenu Name="menu2" Width="300" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
-                <u:NavMenuItem Header="Menu 1">
-                    <u:NavMenuItem.Icon>
-                        <Rectangle
-                            Width="10"
-                            Height="10"
-                            Fill="Red" />
-                    </u:NavMenuItem.Icon>
-                    <u:NavMenuItem Header="Sub Menu 1"></u:NavMenuItem>
-                    <u:NavMenuItem Header="Sub Menu 2"></u:NavMenuItem>
-                    <u:NavMenuItem Header="Sub Menu 3"></u:NavMenuItem>
-                </u:NavMenuItem>
-                <u:NavMenuItem Header="Menu 2">
-                    <u:NavMenuItem.Icon>
-                        <Rectangle
-                            Width="20"
-                            Height="10"
-                            Fill="Red" />
-                    </u:NavMenuItem.Icon>
-                </u:NavMenuItem>
-                <u:NavMenuItem Header="Menu 3">
-                    <u:NavMenuItem.Icon>
-                        <Rectangle
-                            Width="30"
-                            Height="10"
-                            Fill="Red" />
-                    </u:NavMenuItem.Icon>
-                </u:NavMenuItem>
+    <Grid ColumnDefinitions="Auto, Auto" RowDefinitions="Auto, Auto, *" HorizontalAlignment="Left">
+        <ToggleButton Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Name="collapse">Collapse</ToggleButton>
+        <TextBlock Grid.Row="1" Grid.Column="0" Text="{ReflectionBinding #menu.SelectedItem.Header}" />
+        <Border Grid.Row="2" Grid.Column="0" Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
+            <u:NavMenu
+                Header="Hello Ursa"
+                Name="menu"
+                HeaderBinding="{Binding Header}"
+                IconBinding="{Binding IconIndex}"
+                IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
+                ItemsSource="{Binding MenuItems}"
+                SubMenuBinding="{Binding Children}">
+                <u:NavMenu.IconTemplate>
+                    <DataTemplate DataType="{x:Type x:Int32}">
+                        <u:TwoTonePathIcon
+                            Width="16"
+                            Height="16"
+                            Data="{Binding Converter={StaticResource IconConverter}}"
+                            StrokeBrush="{DynamicResource SemiGrey5}"
+                            Foreground="{DynamicResource SemiGrey5}"
+                            ActiveStrokeBrush="{DynamicResource SemiBlue5}"
+                            ActiveForeground="{DynamicResource SemiBlue5}"
+                            IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
+                        </u:TwoTonePathIcon>
+                    </DataTemplate>
+                </u:NavMenu.IconTemplate>
+                <u:NavMenu.Footer>
+                    <Button>Collapse</Button>
+                </u:NavMenu.Footer>
             </u:NavMenu>
-            <u:Divider Content="Divider" />
+        </Border>
+        <TextBlock Grid.Row="1" Grid.Column="1" Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
+        <u:NavMenu Grid.Row="2" Grid.Column="1" Name="menu2" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
+            <u:NavMenuItem Header="Menu 1">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+                <u:NavMenuItem Header="Sub Menu 1"></u:NavMenuItem>
+                <u:NavMenuItem Header="Sub Menu 2"></u:NavMenuItem>
+                <u:NavMenuItem Header="Sub Menu 3"></u:NavMenuItem>
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 2">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 3">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+        </u:NavMenu>
+        <StackPanel HorizontalAlignment="Left">
+            
+            
+            
+            
+            
             
-            <TextBlock Text="{ReflectionBinding #menu.SelectedItem.Header}" />
-            <ToggleButton Name="collapse">Collapse</ToggleButton>
             
-            <Border Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
-                <u:NavMenu
-                    Name="menu"
-                    HeaderBinding="{Binding Header}"
-                    IconBinding="{Binding IconIndex}"
-                    IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
-                    ItemsSource="{Binding MenuItems}"
-                    SubMenuBinding="{Binding Children}">
-                    <u:NavMenu.IconTemplate>
-                        <DataTemplate DataType="{x:Type x:Int32}">
-                            <u:TwoTonePathIcon
-                                Width="18"
-                                Height="18"
-                                Data="{Binding Converter={StaticResource IconConverter}}"
-                                StrokeBrush="{DynamicResource SemiBlue2}"
-                                Foreground="{DynamicResource SemiBlue2}"
-                                ActiveStrokeBrush="{DynamicResource SemiBlue6}"
-                                ActiveForeground="{DynamicResource SemiBlue6}"
-                                IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
-                            </u:TwoTonePathIcon>
-                        </DataTemplate>
-                    </u:NavMenu.IconTemplate>
-                </u:NavMenu>
-            </Border>
 
            
         </StackPanel>
-    </ScrollViewer>
+    </Grid>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
index da22141..b7cdd91 100644
--- a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
+++ b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
@@ -12,9 +12,13 @@
         <Setter Property="SubMenuIndent" Value="24" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavMenu">
-                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
-                    <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
-                </ScrollViewer>
+                <DockPanel LastChildFill="True">
+                    <ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
+                    <ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
+                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                        <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                </DockPanel>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:horizontal-collapsed">
diff --git a/src/Ursa/Controls/Icons/TwoTonePathIcon.cs b/src/Ursa/Controls/Icons/TwoTonePathIcon.cs
index d44ad7c..6ee1267 100644
--- a/src/Ursa/Controls/Icons/TwoTonePathIcon.cs
+++ b/src/Ursa/Controls/Icons/TwoTonePathIcon.cs
@@ -5,6 +5,7 @@ using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
@@ -75,13 +76,7 @@ public class TwoTonePathIcon: TemplatedControl
             ForegroundProperty,
             ActiveForegroundProperty,
             ActiveStrokeBrushProperty);
-        IsActiveProperty.Changed.AddClassHandler<TwoTonePathIcon, bool>((o, e) => o.OnIsActiveChanged(e));
-    }
-
-    private void OnIsActiveChanged(AvaloniaPropertyChangedEventArgs<bool> args)
-    {
-        var newValue = args.NewValue.Value;
-        PseudoClasses.Set(PC_Active, newValue);
+        PropertyToPseudoClassMixin.Attach<TwoTonePathIcon>(IsActiveProperty, PC_Active);
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
diff --git a/src/Ursa/Controls/NavMenu/NavMenu.cs b/src/Ursa/Controls/NavMenu/NavMenu.cs
index d675d0c..0c616d4 100644
--- a/src/Ursa/Controls/NavMenu/NavMenu.cs
+++ b/src/Ursa/Controls/NavMenu/NavMenu.cs
@@ -72,6 +72,9 @@ public class NavMenu: ItemsControl
     public static readonly StyledProperty<IDataTemplate?> HeaderTemplateProperty = AvaloniaProperty.Register<NavMenu, IDataTemplate?>(
         nameof(HeaderTemplate));
 
+    /// <summary>
+    /// Header Template is used for MenuItem headers, not menu header. 
+    /// </summary>
     public IDataTemplate? HeaderTemplate
     {
         get => GetValue(HeaderTemplateProperty);
@@ -105,6 +108,24 @@ public class NavMenu: ItemsControl
         set => SetValue(IsHorizontalCollapsedProperty, value);
     }
 
+    public static readonly StyledProperty<object?> HeaderProperty =
+        HeaderedContentControl.HeaderProperty.AddOwner<NavMenu>();
+
+    public object? Header
+    {
+        get => GetValue(HeaderProperty);
+        set => SetValue(HeaderProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> FooterProperty = AvaloniaProperty.Register<NavMenu, object?>(
+        nameof(Footer));
+
+    public object? Footer
+    {
+        get => GetValue(FooterProperty);
+        set => SetValue(FooterProperty, value);
+    }
+    
     static NavMenu()
     {
         SelectedItemProperty.Changed.AddClassHandler<NavMenu, object?>((o, e) => o.OnSelectedItemChange(e));