SideBar

[Hebreux11]

How to change the color for sidebar:

1. For the brand
2. For the navlink

[gvreddy04]

@Hebreux11 Here is the example:

Before

After

Sample Code

<div class="bb-page">

    <Sidebar Href="/"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             BadgeText="v1.3.1"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">
                <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ToggleSidebarStyles">Toggle Sidebar styles</Button>
            </div>
        </article>
    </main>
     
</div>

@code {
    bool applyPurpleStyle = false;
    IEnumerable<NavItem>? navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle;
}

@if (applyPurpleStyle)
{
    <style>
        :root {
            --bb-sidebar-width: 270px;
            --bb-sidebar-collapsed-width: 50px;
            --bb-sidebar-background-color: rgba(234, 234, 234, 1);
            --bb-sidebar-top-row-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-top-row-border-color: rgb(194,192,192);
            --bb-sidebar-title-text-color: rgb(0,0,0);
            --bb-sidebar-brand-icon-color: #6f42c1;
            --bb-sidebar-brand-image-width: 24px;
            --bb-sidebar-brand-image-height: 24px;
            --bb-sidebar-title-badge-text-color: rgb(255,255,255);
            --bb-sidebar-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
            --bb-sidebar-navbar-toggler-icon-color: rgb(0,0,0);
            --bb-sidebar-navbar-toggler-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-content-border-color: rgb(194,192,192);
            --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
            --bb-sidebar-nav-item-text-active-color-rgb: 0,0,0;
            --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
            --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
        }
    </style>
}

Reference

Demo Link: https://demos.blazorbootstrap.com/sidebar#customize-sidebar

[Hebreux11]

Thank you @gvreddy04 for your better answer 😍😍😍