From 717509d1d454608deb3804c00a02e1573dc347b4 Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Thu, 13 Feb 2025 17:05:58 +0800
Subject: [PATCH 1/2] demo: increase share lib dependency, add irihi logo
 everywhere, group menu items.

---
 demo/Ursa.Demo/Pages/NavMenuDemo.axaml     |  14 ++-
 demo/Ursa.Demo/ViewModels/MenuViewModel.cs | 136 +++++++++++++--------
 demo/Ursa.Demo/Views/MainView.axaml        |  68 +++++------
 src/Ursa/Ursa.csproj                       |   4 +-
 4 files changed, 127 insertions(+), 95 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
index 885d36e46..771b2e33b 100644
--- a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
+++ b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
@@ -7,6 +7,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:u="https://irihi.tech/ursa"
     xmlns:vm="using:Ursa.Demo.ViewModels"
+    xmlns:iri="https://irihi.tech/shared"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:CompileBindings="True"
@@ -65,13 +66,14 @@
                 </u:NavMenu.IconTemplate>
                 <u:NavMenu.Header>
                     <Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto">
-                        <Image
-                            Width="48"
-                            Height="48"
-                            Margin="4,12"
+                        <Panel
+                            VerticalAlignment="Center"
                             u:NavMenu.CanToggle="True"
-                            RenderOptions.BitmapInterpolationMode="HighQuality"
-                            Source="../Assets/Ursa.ico" />
+                            Margin="4 12"
+                            Background="Transparent"
+                            DockPanel.Dock="Left">
+                            <iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
+                        </Panel>
                         <TextBlock
                             Grid.Column="1"
                             VerticalAlignment="Center"
diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index ebb38673a..a54b6b3e1 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -4,66 +4,98 @@ namespace Ursa.Demo.ViewModels;
 
 public class MenuViewModel : ViewModelBase
 {
-    public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }
-
     public MenuViewModel()
     {
-        MenuItems = new ObservableCollection<MenuItemViewModel>()
+        MenuItems = new ObservableCollection<MenuItemViewModel>
         {
             new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false },
             new() { MenuHeader = "Controls", IsSeparator = true },
-            new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout, Status = "New" },
-            new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox, Status = "WIP" },
-            new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
-            new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
-            new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
-            new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
-            new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
-            new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
-            new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock, Status = "Updated" },
-            new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "New" },
-            new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker, Status = "New" },
-            new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
-            new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
-            new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
-            new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
-            new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
-            new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
-            new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
-            new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm },
-            new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
-            new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer, Status = "WIP" },
-            new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
-            new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
-            new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
-            new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee },
-            new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
-            new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox, Status = "Updated" },
-            new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
-            new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification, Status = "New" },
-            new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" },
-            new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
-            new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
-            new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
-            new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "WIP" },
-            new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
-            new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
-            new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
-            new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
-            new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList },
-            new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
-            new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput, Status = "Updated" },
-            new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
-            new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
-            new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
-            new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
-            new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast, Status = "New" },
-            new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
-            new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox },
-            new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon },
+            new()
+            {
+                MenuHeader = "Buttons and Inputs", Children = new ObservableCollection<MenuItemViewModel>
+                {
+                    new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
+                    new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
+                    new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
+                    new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
+                    new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
+                    new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm },
+                    new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
+                    new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
+                    new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
+                    new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
+                    new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
+                    new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker },
+                    new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
+                    new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
+                    new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
+                    new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList },
+                    new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
+                    new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
+                    new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox },
+                }
+            },
+            new()
+            {
+                MenuHeader = "Dialog and Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
+                {
+                    new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
+                    new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
+                    new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
+                    new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
+                    new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
+                    new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
+                    new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
+                }
+            },
+            new()
+            {
+                MenuHeader = "Date and Time", Children = new ObservableCollection<MenuItemViewModel>
+                {
+                    new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
+                    new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
+                    new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
+                    new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
+                    new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
+                }
+            },
+            new()
+            {
+                MenuHeader = "Navigation and Menus", Children = new ObservableCollection<MenuItemViewModel>
+                {
+                    new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
+                    new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
+                    new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
+                    new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
+                }
+            },
+            new()
+            {
+                MenuHeader = "Layout and Display",
+                Children = new ObservableCollection<MenuItemViewModel>
+                {
+                    new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout },
+                    new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar },
+                    new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
+                    new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
+                    new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
+                    new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
+                    new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
+                    new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer },
+                    new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
+                    new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee },
+                    new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer },
+                    new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
+                    new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
+                    new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }
+                }
+            },
+            
             
         };
     }
+
+    public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }
 }
 
 public static class MenuKeys
diff --git a/demo/Ursa.Demo/Views/MainView.axaml b/demo/Ursa.Demo/Views/MainView.axaml
index 40325a3e9..29752b145 100644
--- a/demo/Ursa.Demo/Views/MainView.axaml
+++ b/demo/Ursa.Demo/Views/MainView.axaml
@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="clr-namespace:Ursa.Demo.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:iri="https://irihi.tech/shared"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:u="https://irihi.tech/ursa"
     xmlns:vm="using:Ursa.Demo.ViewModels"
@@ -22,24 +23,25 @@
     <Panel>
         <Panel.Styles>
             <Style Selector="Grid.Blur">
-                <Setter Property="Effect" Value="blur(10)"></Setter>
+                <Setter Property="Effect" Value="blur(10)" />
             </Style>
         </Panel.Styles>
-        <Grid
-            Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}"
-            ColumnDefinitions="Auto, *">
+        <Grid Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}" ColumnDefinitions="Auto, *">
             <Border
-                Padding="8 4"
+                Padding="8,4"
                 VerticalAlignment="Stretch"
                 Theme="{DynamicResource CardBorder}">
-                <u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
-                           ExpandWidth="300"
-                           CommandBinding="{Binding ActivateCommand}"
-                           HeaderBinding="{Binding}"
-                           IconBinding="{Binding MenuHeader}">
+                <u:NavMenu
+                    Name="menu"
+                    CommandBinding="{Binding ActivateCommand}"
+                    ExpandWidth="300"
+                    SubMenuBinding="{Binding Children}"
+                    HeaderBinding="{Binding}"
+                    IconBinding="{Binding MenuHeader}"
+                    ItemsSource="{Binding Menus.MenuItems}">
                     <u:NavMenu.Styles>
-                        <Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel">
-                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
+                        <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
+                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
                         </Style>
                     </u:NavMenu.Styles>
                     <u:NavMenu.IconTemplate>
@@ -62,51 +64,47 @@
                                 <u:Badge
                                     Margin="8,0,0,0"
                                     HorizontalAlignment="Left"
-                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
-                                    Header="{Binding Status}" />
+                                    Header="{Binding Status}"
+                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             </StackPanel>
                         </DataTemplate>
                     </u:NavMenu.HeaderTemplate>
                     <u:NavMenu.Header>
-                        <DockPanel HorizontalAlignment="Center" Margin="8">
-                            <Image
-                                Width="48"
-                                Height="48"
-                                u:NavMenu.CanToggle="True"
+                        <DockPanel Margin="8 32 8 8" HorizontalAlignment="Center" >
+                            <Panel
                                 VerticalAlignment="Center"
-                                DockPanel.Dock="Left"
-                                RenderOptions.BitmapInterpolationMode="HighQuality"
-                                Source="../Assets/Ursa.ico" />
+                                u:NavMenu.CanToggle="True"
+                                Background="Transparent"
+                                DockPanel.Dock="Left">
+                                <iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
+                            </Panel>
                             <TextBlock
+                                VerticalAlignment="Center"
                                 Classes="H4"
-                                Text="Ursa"
+                                Margin="16 0 0 0"
                                 IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
-                                VerticalAlignment="Center"
+                                Text="Ursa"
                                 Theme="{DynamicResource TitleTextBlock}" />
                         </DockPanel>
                     </u:NavMenu.Header>
                     <u:NavMenu.Footer>
                         <u:IconButton
-                            Theme="{DynamicResource BorderlessIconButton}"
+                            HorizontalAlignment="Stretch"
                             Classes="Tertiary"
-                            HorizontalAlignment="Stretch">
-                            <TextBlock
-                                Text="Settings"
-                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}" />
+                            Theme="{DynamicResource BorderlessIconButton}">
+                            <TextBlock IsVisible="{Binding !#menu.IsHorizontalCollapsed}" Text="Settings" />
                             <u:IconButton.Icon>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{StaticResource SemiIconSetting}" />
+                                <PathIcon Data="{StaticResource SemiIconSetting}" Theme="{StaticResource InnerPathIcon}" />
                             </u:IconButton.Icon>
                             <Button.Flyout>
                                 <Flyout Placement="RightEdgeAlignedBottom">
                                     <u:Form LabelPosition="Left">
                                         <ComboBox
-                                            u:FormItem.Label="ThemeVariant"
                                             MinWidth="100"
-                                            PlaceholderText="Select a theme"
+                                            u:FormItem.Label="ThemeVariant"
                                             DisplayMemberBinding="{Binding Name}"
                                             ItemsSource="{Binding Themes}"
+                                            PlaceholderText="Select a theme"
                                             SelectedItem="{Binding SelectedTheme}" />
                                     </u:Form>
                                 </Flyout>
@@ -117,7 +115,7 @@
             </Border>
             <ContentControl
                 Grid.Column="1"
-                Margin="12 36 12 12"
+                Margin="12,36,12,12"
                 Content="{Binding Content}">
                 <ContentControl.ContentTemplate>
                     <converters:ViewLocator />
diff --git a/src/Ursa/Ursa.csproj b/src/Ursa/Ursa.csproj
index fda63934a..1cc157a30 100644
--- a/src/Ursa/Ursa.csproj
+++ b/src/Ursa/Ursa.csproj
@@ -15,8 +15,8 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.2.1" />
-        <PackageReference Include="Irihi.Avalonia.Shared.Contracts" Version="0.2.1" />
+        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.2.3" />
+        <PackageReference Include="Irihi.Avalonia.Shared.Contracts" Version="0.2.3" />
     </ItemGroup>
 
     <ItemGroup>

From 346c89424f4e6eda4c995a9c5c30e13926dbd23b Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 13 Feb 2025 21:31:42 +0800
Subject: [PATCH 2/2] feat: add Nav tag, enhance footer.

---
 demo/Ursa.Demo/Pages/NavMenuDemo.axaml        | 14 +++------
 .../Ursa.Demo/ViewModels/MainViewViewModel.cs |  9 ++++++
 demo/Ursa.Demo/ViewModels/MenuViewModel.cs    | 30 +++++++++----------
 demo/Ursa.Demo/Views/MainView.axaml           | 25 ++++++++--------
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
index 771b2e33b..424e03ad4 100644
--- a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
+++ b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
@@ -20,16 +20,10 @@
         HorizontalAlignment="Left"
         ColumnDefinitions="Auto, Auto"
         RowDefinitions="Auto, Auto, *">
-        <ToggleButton
-            Name="collapse"
-            Grid.Row="0"
-            Grid.Column="0"
-            Grid.ColumnSpan="2">
-            Collapse
-        </ToggleButton>
-        <StackPanel Grid.Row="1" Grid.Column="0">
+        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
+            <ToggleSwitch Name="collapse" OnContent="Collapse" OffContent="Expand" />
+            <Button HorizontalAlignment="Left" Command="{Binding RandomCommand}" Content="Random a selection" />
             <TextBlock Text="{Binding SelectedMenuItem.Header}" />
-            <Button Command="{Binding RandomCommand}">Random a selection</Button>
         </StackPanel>
         <Border
             Grid.Row="2"
@@ -123,4 +117,4 @@
             </u:NavMenuItem>
         </u:NavMenu>
     </Grid>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
index 66038c16c..2abaaf4b0 100644
--- a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
@@ -107,6 +107,15 @@ partial void OnSelectedThemeChanged(ThemeItem? oldValue, ThemeItem? newValue)
             app.RequestedThemeVariant = newValue.Theme;
         }
     }
+
+    [ObservableProperty] private string? _footerText = "Settings";
+
+    [ObservableProperty] private bool _isCollapsed;
+
+    partial void OnIsCollapsedChanged(bool value)
+    {
+        FooterText = value ? null : "Settings";
+    }
 }
 
 public class ThemeItem(string name, ThemeVariant theme)
diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index a54b6b3e1..b044516cb 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -12,10 +12,10 @@ public MenuViewModel()
             new() { MenuHeader = "Controls", IsSeparator = true },
             new()
             {
-                MenuHeader = "Buttons and Inputs", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Buttons & Inputs", Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
-                    new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
+                    new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton, Status = "Redesigned" },
                     new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
                     new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
                     new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
@@ -25,7 +25,7 @@ public MenuViewModel()
                     new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
                     new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
                     new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
-                    new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker },
+                    new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "New" },
                     new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
                     new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
                     new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
@@ -37,11 +37,11 @@ public MenuViewModel()
             },
             new()
             {
-                MenuHeader = "Dialog and Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
+                MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
                 {
                     new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
-                    new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
-                    new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
+                    new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "Updated" },
+                    new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
                     new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
                     new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
                     new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
@@ -50,7 +50,7 @@ public MenuViewModel()
             },
             new()
             {
-                MenuHeader = "Date and Time", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
                     new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
@@ -61,37 +61,35 @@ public MenuViewModel()
             },
             new()
             {
-                MenuHeader = "Navigation and Menus", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Navigation & Menus", Children = new ObservableCollection<MenuItemViewModel>
                 {
-                    new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
-                    new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
+                    new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb, Status = "Updated" },
+                    new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "Updated" },
                     new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
                     new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
                 }
             },
             new()
             {
-                MenuHeader = "Layout and Display",
+                MenuHeader = "Layout & Display",
                 Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout },
-                    new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar },
+                    new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
                     new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
-                    new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
+                    new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner, Status = "Updated" },
                     new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
                     new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
                     new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
                     new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer },
                     new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
-                    new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee },
+                    new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee, Status = "New" },
                     new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer },
                     new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
                     new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
                     new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }
                 }
             },
-            
-            
         };
     }
 
diff --git a/demo/Ursa.Demo/Views/MainView.axaml b/demo/Ursa.Demo/Views/MainView.axaml
index 29752b145..b579f1674 100644
--- a/demo/Ursa.Demo/Views/MainView.axaml
+++ b/demo/Ursa.Demo/Views/MainView.axaml
@@ -38,6 +38,7 @@
                     SubMenuBinding="{Binding Children}"
                     HeaderBinding="{Binding}"
                     IconBinding="{Binding MenuHeader}"
+                    IsHorizontalCollapsed="{Binding IsCollapsed, Mode=TwoWay}"
                     ItemsSource="{Binding Menus.MenuItems}">
                     <u:NavMenu.Styles>
                         <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
@@ -59,12 +60,12 @@
                     </u:NavMenu.IconTemplate>
                     <u:NavMenu.HeaderTemplate>
                         <DataTemplate x:DataType="vm:MenuItemViewModel">
-                            <StackPanel Orientation="Horizontal">
+                            <StackPanel Orientation="Horizontal" Spacing="{StaticResource SemiSpacingExtraTight}">
                                 <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
-                                <u:Badge
-                                    Margin="8,0,0,0"
-                                    HorizontalAlignment="Left"
-                                    Header="{Binding Status}"
+                                <Label
+                                    Theme="{StaticResource TagLabel}"
+                                    Classes="Purple"
+                                    Content="{Binding Status}"
                                     IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             </StackPanel>
                         </DataTemplate>
@@ -91,20 +92,20 @@
                         <u:IconButton
                             HorizontalAlignment="Stretch"
                             Classes="Tertiary"
+                            Icon="{StaticResource SemiIconSetting}"
+                            Content="{Binding FooterText}"
+                            RenderTransform="{x:Null}"
+                            ToolTip.Tip="Settings"
+                            FontWeight="Normal"
                             Theme="{DynamicResource BorderlessIconButton}">
-                            <TextBlock IsVisible="{Binding !#menu.IsHorizontalCollapsed}" Text="Settings" />
-                            <u:IconButton.Icon>
-                                <PathIcon Data="{StaticResource SemiIconSetting}" Theme="{StaticResource InnerPathIcon}" />
-                            </u:IconButton.Icon>
                             <Button.Flyout>
                                 <Flyout Placement="RightEdgeAlignedBottom">
                                     <u:Form LabelPosition="Left">
                                         <ComboBox
-                                            MinWidth="100"
-                                            u:FormItem.Label="ThemeVariant"
+                                            Width="110"
+                                            u:FormItem.Label="Theme"
                                             DisplayMemberBinding="{Binding Name}"
                                             ItemsSource="{Binding Themes}"
-                                            PlaceholderText="Select a theme"
                                             SelectedItem="{Binding SelectedTheme}" />
                                     </u:Form>
                                 </Flyout>