Sidebar recipe

Source: 09_Sidebar/ · how to inject custom buttons into the workspace's default sidebar.

What it teaches

The actual wiring lives in src/App.cs — a single subscription to App.Sidebar.OnSidebarRebuild_BeforeFooter that runs every time the sidebar is rebuilt. For each recipe in Recipes.cs the code:

1. Creates a SidebarButton with an id, icon and label.
2. Wires OnClick to Router.Navigate(...).
3. Uses tracker.Add(...) so the button's IsSelected state stays in sync with the URL hash.

The four OnSidebarRebuild_* hooks (BeforeHeader, AfterHeader, BeforeFooter, AfterFooter) give you four anchor points inside the sidebar. BeforeFooter is the right one for "add a navigation item to the existing list".

Code shape

App.Sidebar.OnSidebarRebuild_BeforeFooter += (sidebar, mode, tracker) =>
{
    if (mode != App.Sidebar.Mode.Default) return;

    foreach (var recipe in RecipeCatalog.All)
    {
        var captured = recipe;
        var btn      = new SidebarButton(captured.Id, captured.Icon, captured.Title)
                          .OnClick(() => Router.Navigate(captured.Route));

        tracker.Add(() => btn.IsSelected = window.location.hash.Contains(captured.Route));
        sidebar.AddContent(btn);
    }
};

Reacting to mode

The mode argument tells you which sidebar variant is being rebuilt:

* See App.Sidebar.IsAdminMode(mode) for the full list.

See also

• User Preferences recipe — adds a button to the UserPreferences sidebar mode and a custom page to back it.
• Mosaik.FrontEnd.LicenseServer/src/LicenseApp.cs — production app that uses the same pattern, plus role-gating (if (CurrentUser.IsAdmin)).
• Mosaik.FrontEnd/src/App.Sidebar.cs — the full sidebar implementation if you need to look behind the curtain.