Use an Image instead of a text in the BarBrand and make it disappear with the Toggle in the Sidebar component.

[michele-bettin]

Hi guys! Does someone know how to use an image instead of a normal text on the BarBrand and make it disappear when I press the <BarToggler />. I have provided a little example to explain the scenario.

<Bar Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
     Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small" style="width: 30%;">
    <BarToggler  />
    <BarBrand>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="customIcon" />
                App Name
@* I wanto to use this image instead  <img src="/ScrittaStatTradeTagliata-transformed.png" style="width:150px; height: 45px" /> *@
            </BarLink>

        </BarItem>
    </BarBrand>
</Bar

I would like the BarIcon to remain in the collapsed lateral bar, but the image obviously not beacause it is too big. But in my scenario both of the them reamin in the collapsed bar.

@David-Moreira @stsrki Any suggestions?

[stsrki]

Maybe bind the Bar to a variable and then use it to conditionally show or hide image?

<Bar @bind-Visible="@barVisible " Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
     Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small" style="width: 30%;">
    <BarToggler  />
    <BarBrand>
        <BarItem>
            <BarLink To="">
                @if ( barVisible )
                {
                    <Image Source="/ScrittaStatTradeTagliata-transformed.png" Style="width:150px; height: 45px" />
                }
                else
                {
                    <BarIcon IconName="customIcon" />
                }
                App Name
            </BarLink>
        </BarItem>
    </BarBrand>
</Bar
@code{
  bool barVisible = true;
}

[michele-bettin]

No, there is a misunderstanding. I want to use an image that visually show "App Name" in a fashion way... So I want to replace the text "App Name" with my image component (So no broblem with BarIcon). The problem is that if you put the Image after the BarIcon the Image component doesn't disappear when you collapse the sidebar (as the text would do) but it remains creating a terrible effect.

[stsrki]

Have you tried an example? The if statement will only render one or another. You can show "App Name" wherever you need or you can just remove it.

[michele-bettin]

Thanks, the condition works!

<Bar @bind-Visible="IsVisibileSideBar" Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
     Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small" style="width: 30%;">
    <BarToggler  />
    <BarBrand>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="customIcon" />
                @if (IsVisibileSideBar)
                {
                    <img src="/ScrittaStatTradeTagliata-transformed.png" style="width:150px; height: 45px" />
                }