Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Sidebar not showing items #939

Unanswered
CosminCAS123 asked this question in Q&A
Discussion options

Hey! New to blazor bootstrap and blazor in general(Web App interactive auto template ). In client project, I defined a layout that'll use the SideBar component . I simplified it for this issue ( no data provider) :

@inherits LayoutComponentBase
<div class="bb-page">
 <Sidebar Title="For relationships" IconName="IconName.Apple">
 < NavItem Href="/home" IconName="IconName.House" Text="Home" />
 
 </Sidebar>
 <main class="content">
 @Body
 </main>
</div>

then the Home page (client project) looks like this :

@page "/home"
@rendermode InteractiveAuto
@layout Layouts.SidebarLayout
<h1>HOME PAGE WITH SIDEBAR LAYOUT</h1>

And the result is :
image

I also tried the layout on my starting auth interactive SSR pages (login and register) from the server, and the same thing happens.

I installed blazor bootstrap accordingly to the web app interactive auto tutorial. If you need any more information ,please tell me. Thanks!

You must be logged in to vote

Replies: 1 comment 4 replies

Comment options

@CosminCAS123 Thank you for trying BlazorBootstrap. Here is the example:

<Sidebar Href="/"
 IconName="IconName.BootstrapFill"
 Title="Blazor Bootstrap"
 DataProvider="SidebarDataProvider" />
@code {
 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 { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
 new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"},
 new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"},
 new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"},
 new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"},
 };
 return navItems;
 }
}

image

Link: https://demos.blazorbootstrap.com/sidebar

You must be logged in to vote
4 replies
Comment options

yes, i followed the tutorial , but I simplified my sidebar for the sake of example. still endless loading happening.

Comment options

I am having a similar problem and I think I may have tracked down what is happening. It appears that the menu has the collapse class added to it, so it is never displayed. If I manually remove the collapse class in the browser, the menu appears. Is there something else that needs to be done to have this not include the collapse class? I looked at the code for SideBar and I didn't see how this could be done from the outside. It looks like collapseNavMenu is initialized to true, but there isn't a way to flip it.

Any assistance would be appreciated. Thank you.

image

Comment options

I'm seeing the same thing. Is there any fix for this?

Comment options

I ended up shelving the design that needed the sidebar, so stopped working on this. I had started looking at creating a custom component that extended BlazorBootstrapComponentBase for the sidebar. I think it was using the code from Sidebar in the project. I checked and I don't have the code. Sorry can't help more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

AltStyle によって変換されたページ (->オリジナル) /