Sidebar is hidden by default and nav items are not visible

[Geetha-Ravindran]

When application is displayed in full screen, the sidebar is not visible. So the nav items are hidden too. We have to minimise the application to see the hamburger menu and then click on it to see all the nav items. Any way to keep the hamburger menu visible always?

[gvreddy04]

@Geetha-Ravindran Thank you for using BlazorBootstrap. Please share a screenshot for better understanding your issue.

Versions (please complete the following information):

• .NET Version: [e.g. .NET 6, .NET 7, .NET 8]
• BlazorBootstrap: [e.g. 2.0.0, 2.1.0, 2.2.0]
• Blazor WebAssembly / Server: [e.g. WebAssembly, Server]
• Blazor Interactive Render Mode: [e.g. Auto, Server, WebAssembly, None]
• Blazor Interactivity Location: [e.g. Global, Per page/component]

Sample code
Sample code to reproduce the issue.

[Cjoshua2]

@gvreddy04 I am also experiencing this issue.

.NET Version : 8
BlazorBootstrap: 2.2.0
Blazor WASM
Render mode : WebAssembly/None
Interactivity location : Global.

Result :

Expected result :

[gvreddy04]

@Cjoshua2 @Geetha-Ravindran Please share a screen recording for better understanding of the issue.

Also share the following details:

Browser:
Browser version:
Laptop/Desktop screen display size:

[sys-bh]

I have the same experience, the menu does not render unless you shrink the browser down, open the hamburger. I've taken the out of the box Blazor Server App template and replaced the NavMenu with the Sidebar2 example code from here to reproduce the problem: https://demos.blazorbootstrap.com/sidebar2

.NET Version: .NET 8
BlazorBootstrap: v3.0.0-preview.3
Blazor WebAssembly / Server: Server
Blazor Interactive Render Mode: Server
Blazor Interactivity Location: Per page/component]
Browser: Chrome
Browser version: Version 127.0.6533.120 (Official Build) (64-bit)
Laptop/Desktop screen display size: Desktop - all screen sizes when hamberger is not visible

[gvreddy04]

@Geetha-Ravindran @sys-bh @Cjoshua2 Thank you for using BlazorBootstrap. We will prioritize this issue and include it in the 3.0.0 release.

[gvreddy04]

@Geetha-Ravindran @sys-bh @Cjoshua2 Can you attach a screen recording of the issue?

[sys-bh]

https://www.loom.com/share/8fb3d01871ab40a4ba38401067eb15c2?sid=30daf06c-d05d-4716-936e-f932eb92deca Thanks, Ben

…

________________________________ Benjamin Hobgood | Chief Technology Officer, SySys Corp. | +1 303.835.0004 x109 From: Vikram Reddy ***@***.***> Sent: Tuesday, August 20, 2024 5:09 AM To: vikramlearning/blazorbootstrap ***@***.***> Cc: Ben Hobgood ***@***.***>; Mention ***@***.***> Subject: Re: [vikramlearning/blazorbootstrap] Sidebar is hidden by default and nav items are not visible (Issue #751) @Geetha-Ravindran<https://github.com/Geetha-Ravindran> @sys-bh<https://github.com/sys-bh> @Cjoshua2<https://github.com/Cjoshua2> Can you attach a screen recording of the issue? — Reply to this email directly, view it on GitHub<#751 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQLCOW3ND6MXENGFVTKI2A3ZSMPTZAVCNFSM6AAAAABJGCZGRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJYGU4TEMRQGM>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>> This message is for the designated recipient only and contains privileged, proprietary, and otherwise private information belonging to SySys® Corporation. If you are not the intended recipient, notify the sender immediately and delete the original. Any unauthorized use of this and any related communication is prohibited. SySys® Corporation electronically archives all outgoing and incoming e-mails and are subject to review and/or disclosure to someone other than the recipient.

[gvreddy04]

@sys-bh This is very helpful. Thanks for your time.

[gvreddy04]

@sys-bh Please try the following sample code and let me know.

Before:

After:

MainLayout.razor

@inherits LayoutComponentBase
<div class="bb-page">

    <LeftMenu @rendermode="InteractiveServer" />

    <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">@Body</div>
        </article>
    </main>

</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Screenshot

[sys-bh]

I get the same problem. Menu does not show initially but does after I shrink the browser, click the hamberger

My left menu:
@Inject NavigationManager NavigationManager

<Sidebar2 Href="/"
@ref="menu"
IconName="IconName.RocketTakeOff"
Title="FundSys"
BadgeText="v6.0"
DataProvider="Sidebar2DataProvider"
Width="250" />

[gvreddy04]

@sys-bh Please share a GitHub repo to reproduce the issue with minimal code. I'll investigate.

[sys-bh]

The bug is related to misplacing the css links in files in App.razor. To reproduce the behaviror move the Blazor generated styles.css above the bootstrap and blazor bootstrap css links.

**<link rel="stylesheet" href="BlazorApp1.styles.css" />**
    
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />

[sys-bh]

@gvreddy04, thanks for your time helping to uncover the problem. Once I built out a minimal code sample, rulling out browser & version issues I compared the placement of resources in the sample to my app and uncovered the problem as described above.

[gvreddy04]

@sys-bh Please let me know if you have any other questions or need further assistance. I'll close this bug now.