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

as this is a 3rd part library you should use their support.

https://blazor.radzen.com/support

Answer 3

@Ruikai Feng - MSFT thank you for your help, where exactly did you make changes? I had a hard time following :)

Answer 4

@Ruikai Feng - MSFT thanks for your help. I guess I need to make some more adjustments, it seems to me that the line is a little lower for sidebar. And the main problem is that every time I click on the sidebar menu items, toggler closes. How can I get the menu to open and close only when pressing the hamburger menu icon?

This works for the line but still, I need to solve sidebar open/close only with the icon.

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

Answer 5

@Ruikai Feng - MSFT Here is how it is now, the problems I mentioned continue.