Bootstrap 5 sidebar problem

Question

Hi,

I am working on a Blazor Server Application. I have this Radzen menu (NavMenu.razor);

<RadzenPanelMenu>  
    <RadzenPanelMenuItem Text="General" Icon="line_weight">  
        <RadzenPanelMenuItem Text="Home" Path="/" Icon="home"></RadzenPanelMenuItem>  
    </RadzenPanelMenuItem>  
    <RadzenPanelMenuItem Text="Orders" Icon="add_shopping_cart">  
        <RadzenPanelMenuItem Text="Orders List" Path="orders" Icon="receipt_long"></RadzenPanelMenuItem>  
        <RadzenPanelMenuItem Text="Orders Upload" Path="upload" Icon="file_upload"></RadzenPanelMenuItem>  
        <RadzenPanelMenuItem Text="Orders Export" Path="export" Icon="post_add"></RadzenPanelMenuItem>  
    </RadzenPanelMenuItem>  
    <RadzenPanelMenuItem Text="Vendors" Icon="face">  
        <RadzenPanelMenuItem Text="Vendor List" Path="vendors" Icon="account_box"></RadzenPanelMenuItem>  
    </RadzenPanelMenuItem>  
    <RadzenPanelMenuItem Text="Customers" Icon="paid">  
        <RadzenPanelMenuItem Text="Customer List" Path="customers" Icon="add_cart"></RadzenPanelMenuItem>  
    </RadzenPanelMenuItem>  
    <RadzenPanelMenuItem Text="Administration" Icon="paid">  
        <RadzenPanelMenuItem Text="User Management" Path="administration" Icon="security"></RadzenPanelMenuItem>  
    </RadzenPanelMenuItem>  
</RadzenPanelMenu>  

But I want to use https://getbootstrap.com/docs/5.0/examples/sidebars/# collapsible for the sidebar. I copied sidebars.css and the related HTML tags but there are some problems with the outcome.

Can you please help me?

I forgot to mention that clicking the menu items, triggers the toggler to hide and show. How can I only trigger the sidebar hide and show only with the toggler icon?

Thank you.

Answer 1

Hi,@ Cenk-1028
I checked your codes and

main {  
    display: flex;  
    flex-wrap: nowrap;  
    height: 100vh;  
    height: -webkit-fill-available;  
    max-height: 100vh;  
    overflow-x: auto;  
    overflow-y: hidden;  
}  

in your sidebar.css affected your former codes
So I modified the codes and added class attribute to your main tag in sidebar page as below:

.sidebarmain {  
    display: flex;  
    flex-wrap: nowrap;  
    height: 100vh;  
    height: -webkit-fill-available;  
    max-height: 100vh;  
    overflow-x: hidden;  
    overflow-y: hidden;  
}  

in your NavMenu.razor:

......  
<main class="sidebarmain">  
.......  

then I added the codes in your MainLayout.razor:

<style>  
.pb-3,  
.py-3 {  
  padding-bottom: 0.65rem !important;  
}  
</style>  

----------

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". 
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards
RuikaiFeng

Answer 2

@Ruikai Feng - MSFT I did some trial and error on the _Layout.cshtml. When I remove this <link href="IMS.WebApp.styles.css" rel="stylesheet"/> page structure is broken but menu worked correctly.

It was CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset.

Blazor CSS isolation

Any idea how to fix it?

Answer 3

It works correctly on mobile portrait and landscape but still couldn't find out not working on others.

Answer 4

I understand the problem! Now the sidebar menu working correctly. find the Bootstrap 5 sidebar snippet.