feat: add pseudo classes.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -12,7 +12,9 @@
     x:DataType="vm:NavMenuDemoViewModel"
     mc:Ignorable="d">
     <StackPanel>
-        <u:NavMenu>
+        <TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
+        <u:NavMenu Name="menu2">
+
             <u:NavMenuItem Header="Menu 1">
                 <u:NavMenuItem.Icon>
                     <Rectangle

demo/Ursa.Demo/ViewModels/NavMenuDemoViewModel.cs

@@ -1,5 +1,9 @@
 using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
 
 namespace Ursa.Demo.ViewModels;
 
@@ -11,7 +15,12 @@ public class NavMenuDemoViewModel: ObservableObject
         {
             new MenuItem() { Header = "Getting Started" },
             new MenuItem() { Header = "Design Principles" },
-            new MenuItem() { Header = "Contributing" },
+            new MenuItem() { Header = "Contributing", Children =
+            {
+                new MenuItem() { Header = "Code of Conduct" },
+                new MenuItem() { Header = "How to Contribute" },
+                new MenuItem() { Header = "Development Workflow" },
+            }},
         }},
         new MenuItem { Header = "Badge" },
         new MenuItem { Header = "Banner" },
@@ -45,5 +54,17 @@ public class MenuItem
 {
     public string? Header { get; set; }
     public string? Icon { get; set; }
+    public ICommand NavigationCommand { get; set; }
+
+    public MenuItem()
+    {
+        NavigationCommand = new AsyncRelayCommand(OnNavigate);
+    }
+
+    private async Task OnNavigate()
+    {
+        await MessageBox.ShowOverlayAsync(Header??string.Empty, "Navigation Result");
+    }
+
     public ObservableCollection<MenuItem> Children { get; set; } = new ObservableCollection<MenuItem>();
 }

src/Ursa.Themes.Semi/Controls/NavMenu.axaml

@@ -1,17 +1,18 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
+<ResourceDictionary
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns="https://github.com/avaloniaui"
-                    xmlns:u="https://irihi.tech/ursa">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    <!-- Add Resources Here -->
+    xmlns:u="https://irihi.tech/ursa">
-    <ControlTheme TargetType="u:NavMenu" x:Key="{x:Type u:NavMenu}">
+    <!--  Add Resources Here  -->
-        <Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>
+    <ControlTheme x:Key="{x:Type u:NavMenu}" TargetType="u:NavMenu">
+        <Setter Property="Grid.IsSharedSizeScope" Value="True" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavMenu">
-                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" Grid.IsSharedSizeScope="True"/>
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-    
+
-    <ControlTheme TargetType="u:NavMenuItem" x:Key="{x:Type u:NavMenuItem}">
+    <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavMenuItem">
                 <Grid RowDefinitions="Auto, *">
@@ -20,10 +21,20 @@
                             <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
                             <ColumnDefinition Width="*" />
                         </Grid.ColumnDefinitions>
-                        <ContentPresenter Content="{TemplateBinding Icon}" HorizontalAlignment="Left" />
+                        <ContentPresenter
-                        <ContentPresenter Grid.Column="1" Content="{TemplateBinding Header}" />
+                            HorizontalAlignment="Left"
+                            Background="Aqua"
+                            Content="{TemplateBinding Icon}" />
+                        <ContentPresenter
+                            Grid.Column="1"
+                            Background="LightYellow"
+                            Content="{TemplateBinding Header}" />
                     </Grid>
-                    <ItemsPresenter Grid.Row="1" ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    <ItemsPresenter
+                        Grid.Row="1"
+                        Margin="20,0,0,0"
+                        Grid.IsSharedSizeScope="True"
+                        ItemsPanel="{TemplateBinding ItemsPanel}" />
                 </Grid>
             </ControlTemplate>
         </Setter>

src/Ursa/Controls/NavMenu/NavMenu.cs

@@ -52,6 +52,17 @@ public class NavMenu: ItemsControl
         set => SetValue(SubMenuBindingProperty, value);
     }
 
+    public static readonly StyledProperty<IBinding?> CommandBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
+        nameof(CommandBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? CommandBinding
+    {
+        get => GetValue(CommandBindingProperty);
+        set => SetValue(CommandBindingProperty, value);
+    }
+
     static NavMenu()
     {
         SelectedItemProperty.Changed.AddClassHandler<NavMenu, object?>((o, e) => o.OnSelectedItemChange(e));
@@ -89,18 +100,28 @@ public class NavMenu: ItemsControl
             {
                 navMenuItem[!ItemsSourceProperty] = SubMenuBinding;
             }
+            if (CommandBinding is not null)
+            {
+                navMenuItem[!NavMenuItem.CommandProperty] = CommandBinding;
+            }
         }
     }
 
-    internal void SelectItem(NavMenuItem item)
+    internal void SelectItem(NavMenuItem item, NavMenuItem parent)
     {
-        if (item.IsSelected) return;
+        // if (item.IsSelected) return;
-        var children = this.LogicalChildren.OfType<NavMenuItem>();
+        foreach (var child in LogicalChildren)
-        foreach (var child in children)
         {
-            if (child != item)
+            if (child == parent)
             {
-                child.IsSelected = false;
+                continue;
+            }
+            else
+            {
+                if (child is NavMenuItem navMenuItem)
+                {
+                    navMenuItem.ClearSelection();
+                }
             }
         }
         if (item.DataContext is not null && item.DataContext != this.DataContext)

src/Ursa/Controls/NavMenu/NavMenuItem.cs

@@ -11,12 +11,17 @@ using Avalonia.VisualTree;
 
 namespace Ursa.Controls;
 
-[PseudoClasses(PC_Highlighted)]
+[PseudoClasses(PC_Highlighted, PC_Collapsed, PC_Closed, PC_FirstLevel, PC_Selector)]
 public class NavMenuItem: HeaderedSelectingItemsControl
 {
-    public const string PC_Highlighted = "highlighted";
+    public const string PC_Highlighted = ":highlighted";
+    public const string PC_FirstLevel = ":first-level";
+    public const string PC_Collapsed = ":collapsed";
+    public const string PC_Closed = ":closed";
+    public const string PC_Selector = ":selector";
     
     private NavMenu? _rootMenu;
+    private Panel? _popupPanel;
     
     public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavMenuItem, object?>(
         nameof(Icon));
@@ -36,8 +41,7 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         set => SetValue(IconTemplateProperty, value);
     }
 
-    public static readonly StyledProperty<ICommand?> CommandProperty = AvaloniaProperty.Register<NavMenuItem, ICommand?>(
+    public static readonly StyledProperty<ICommand?> CommandProperty = Button.CommandProperty.AddOwner<NavMenuItem>();
-        nameof(Command));
 
     public ICommand? Command
     {
@@ -45,6 +49,15 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         set => SetValue(CommandProperty, value);
     }
 
+    public static readonly StyledProperty<object?> CommandParameterProperty =
+        Button.CommandParameterProperty.AddOwner<NavMenuItem>();
+
+    public object? CommandParameter
+    {
+        get => GetValue(CommandParameterProperty);
+        set => SetValue(CommandParameterProperty, value);
+    }
+
     public new static readonly StyledProperty<bool> IsSelectedProperty =
         SelectingItemsControl.IsSelectedProperty.AddOwner<NavMenuItem>();
 
@@ -53,15 +66,34 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         get => GetValue(IsSelectedProperty);
         set => SetValue(IsSelectedProperty, value);
     }
+
+    private bool _isHighlighted;
+
+    public static readonly DirectProperty<NavMenuItem, bool> IsHighlightedProperty = AvaloniaProperty.RegisterDirect<NavMenuItem, bool>(
+        nameof(IsHighlighted), o => o.IsHighlighted, (o, v) => o.IsHighlighted = v);
+
+    public bool IsHighlighted
+    {
+        get => _isHighlighted;
+        private set => SetAndRaise(IsHighlightedProperty, ref _isHighlighted, value);
+    }
     
     
+    internal int Level { get; set; }
+    
 
     static NavMenuItem()
     {
         SelectableMixin.Attach<NavMenuItem>(IsSelectedProperty);
         PressedMixin.Attach<NavMenuItem>();
+        IsHighlightedProperty.Changed.AddClassHandler<NavMenuItem, bool>((o, e) => o.OnIsHighlightedChange(e));
     }
-    
+
+    private void OnIsHighlightedChange(AvaloniaPropertyChangedEventArgs<bool> args)
+    {
+        PseudoClasses.Set(PC_Highlighted, args.NewValue.Value);
+    }
+
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
     {
         return NeedsContainer<NavMenuItem>(item, out recycleKey);
@@ -81,6 +113,18 @@ public class NavMenuItem: HeaderedSelectingItemsControl
             {
                 container[!HeaderProperty] = _rootMenu.HeaderBinding;
             }
+            if (_rootMenu?.IconBinding is not null)
+            {
+                container[!IconProperty] = _rootMenu.IconBinding;
+            }
+            if (_rootMenu?.SubMenuBinding is not null)
+            {
+                container[!ItemsSourceProperty] = _rootMenu.SubMenuBinding;
+            }
+            if (_rootMenu?.CommandBinding is not null)
+            {
+                container[!CommandProperty] = _rootMenu.CommandBinding;
+            }
         }
     }
 
@@ -90,16 +134,76 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         _rootMenu = GetRootMenu();
     }
 
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        var children = this.ItemsPanelRoot?.Children.ToList();
+        base.OnApplyTemplate(e);
+        Level = CalculateDistanceFromLogicalParent<NavMenuItem>(this);
+        PseudoClasses.Set(PC_FirstLevel, Level == 0);
+    }
+
     protected override void OnPointerPressed(PointerPressedEventArgs e)
     {
         base.OnPointerPressed(e);
-        _rootMenu?.SelectItem(this);
+        SelectItem(this);
+        Command?.Execute(CommandParameter);
         e.Handled = true;
     }
+    
+    protected void SelectItem(NavMenuItem item)
+    {
+        if (item == this)
+        {
+            SetCurrentValue(IsSelectedProperty, true);
+            SetCurrentValue(IsHighlightedProperty, true);
+        }
+        else
+        {
+            SetCurrentValue(IsSelectedProperty, false);
+            SetCurrentValue(IsHighlightedProperty, true);
+        }
+        if (this.Parent is NavMenuItem menuItem)
+        {
+            menuItem.SelectItem(item);
+        }
+        else if (this.Parent is NavMenu menu)
+        {
+            menu.SelectItem(item, this);
+        }
+    }
+
+    internal void ClearSelection()
+    {
+        SetCurrentValue(IsHighlightedProperty, false);
+        SetCurrentValue(IsSelectedProperty, false);
+        foreach (var child in LogicalChildren)
+        {
+            if (child is NavMenuItem item)
+            {
+                item.ClearSelection();
+            }
+        }
+    }
 
     private NavMenu? GetRootMenu()
     {
         var root = this.FindAncestorOfType<NavMenu>() ?? this.FindLogicalAncestorOfType<NavMenu>();
         return root;
     }
+    
+    private static int CalculateDistanceFromLogicalParent<T>(ILogical? logical, int @default = -1) where T : class
+    {
+        var result = 0;
+
+        while (logical != null && !(logical is T))
+        {
+            if (logical is NavMenuItem)
+            {
+                result++;
+            }
+            logical = logical.LogicalParent;
+        }
+
+        return logical != null ? result : @default;
+    }
 }