FloweryComponentSidebar

Overview

FloweryComponentSidebar is a navigational sidebar composed of collapsible categories and clickable items. It provides built-in search filtering, a routed ItemSelected event, optional badges per item, and persistence of expanded state/last selection to local app data. You must supply your own Categories collection - the control initializes with an empty collection.

Similarly, set AvailableLanguages to enable the language selector functionality (if you include a SidebarLanguageSelectorItem in your items).

Key Properties & Events

Member	Description
`Categories` (`ObservableCollection`)	Data source for sections and items. Each category has `Name`, `IconKey` (maps to a geometry resource), `IsExpanded`, and `Items`.
`SelectedItem` (`SidebarItem?`)	Currently selected item; set programmatically to highlight and persist selection.
`SidebarWidth` (double, default 220)	Fixed width of the sidebar host.
`SearchText` (string)	Text used to filter categories/items. Setting it triggers live filtering; clearing restores the full list.
`ItemSelected` (event)	Raised with `SidebarItemSelectedEventArgs` containing the selected `SidebarItem` and its `SidebarCategory`.
`AvailableLanguages` (`ObservableCollection`)	List of languages for the language selector dropdown.
`SelectedLanguage` (`SidebarLanguage?`)	Currently selected language; syncs with `FloweryLocalization`.

Data Models

SidebarCategory: Name, IconKey, IsExpanded, Items (ObservableCollection)
SidebarItem: Id, Name, TabHeader, optional Badge
SidebarLanguageSelectorItem: Special item type that renders as a language dropdown instead of a button
SidebarThemeSelectorItem: Special item type for theme selection
SidebarLanguage: Code (e.g., "en", "de"), DisplayName (e.g., "English", "Deutsch")

Language/Translation Support

The sidebar integrates with FloweryLocalization for runtime language switching:

1. Set up available languages by populating AvailableLanguages:

// In code-behind or ViewModel
ComponentSidebar.AvailableLanguages = new ObservableCollection<SidebarLanguage>
{
    new SidebarLanguage { Code = "en", DisplayName = "English" },
    new SidebarLanguage { Code = "de", DisplayName = "Deutsch" },
    new SidebarLanguage { Code = "fr", DisplayName = "Français" },
    new SidebarLanguage { Code = "es", DisplayName = "Español" },
    new SidebarLanguage { Code = "ja", DisplayName = "日本語" },
};

2. Add a language selector item to your categories:

<controls:SidebarCategory Name="Home" IconKey="DaisyIconHome">
    <controls:SidebarItem Id="welcome" Name="Welcome" TabHeader="Home" />
    <controls:SidebarLanguageSelectorItem Id="language" Name="Language" TabHeader="Home" />
</controls:SidebarCategory>

3. Language syncs automatically - when user selects a language from the dropdown, FloweryLocalization.SetCulture() is called. The SelectedLanguage property also updates when FloweryLocalization.CultureChanged fires externally.

4. For translatable category/item names in the Gallery, the host application (e.g., Gallery) subscribes to FloweryLocalization.CultureChanged and rebuilds the Categories collection with localized strings from resource files.

Quick Examples

<!-- Basic sidebar with custom categories -->
<controls:FloweryComponentSidebar SidebarWidth="240">
    <controls:FloweryComponentSidebar.Categories>
        <controls:SidebarCategory Name="General" IconKey="DaisyIconHome">
            <controls:SidebarItem Name="Overview" Id="overview" TabHeader="General" />
            <controls:SidebarItem Name="Changelog" Id="changelog" TabHeader="General" Badge="New" />
        </controls:SidebarCategory>
        <controls:SidebarCategory Name="Components" IconKey="DaisyIconComponents">
            <controls:SidebarItem Name="Button" Id="button" TabHeader="Components" />
            <controls:SidebarItem Name="Card" Id="card" TabHeader="Components" />
        </controls:SidebarCategory>
    </controls:FloweryComponentSidebar.Categories>
</controls:FloweryComponentSidebar>

<!-- Bind search box elsewhere and react to selection -->
<StackPanel Orientation="Horizontal" Spacing="12">
    <TextBox Width="180"
             Watermark="Search components..."
             Text="{Binding ElementName=Sidebar, Path=SearchText, Mode=TwoWay}" />
    <controls:FloweryComponentSidebar x:Name="Sidebar"
                                    ItemSelected="OnSidebarItemSelected"
                                    Width="260" />
</StackPanel>

Tips & Best Practices

Provide matching IconKey resources (StreamGeometry) in your theme for custom categories.
Use Badge to denote counts or "New" labels; it renders via DaisyBadge in the item template.
The control persists expanded state and last selected item under the user's local app data; when distributing, ensure the process has write access there.
For dynamic data, replace the default Categories with your own collection; filtering operates on the original backing list _allCategories, so update that source directly when modifying data at runtime.
Subscribe to ItemSelected to navigate views/tabs; the event bubbles, so you can handle it at parent containers.
To translate sidebar items dynamically, rebuild Categories when FloweryLocalization.CultureChanged fires, using localized strings from your resource files.