(req) almost perfect but missing one thing of bootstrap componen "Responsive offcanvas navbar"

[H.]

"Responsive offcanvas navbar"
desktop app : horizontal menu
mobile app : vertical menu/sidebar offcanvas

demo last one
https://getbootstrap.com/docs/5.2/examples/navbars-offcanvas/

on desktop:

and mobile:

[Prasanth Madhaiyan]

Hi H,

Greetings from Syncfusion support.

We have validated your requirement in the Blazor Sidebar by using your shared details. However, we were quite unclear about your exact requirement in the Sidebar component. Could you please share the exact requirement for the Responsive offcanvas navbar related details for the mobile mode and desktop mode? Based on that, we will check and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

[Prasanth Madhaiyan]

Hi H,

Based on the information provided, it appears that you intend to display certain items in the Toolbar. The visibility of the Toolbar menu button will depend on the device in order to activate the Sidebar component on your end. To meet your needs, we have successfully implemented this functionality by utilizing the Syncfusion Media Query component's ActiveBreakPoint property. This property allows us to exhibit the Menu button for toggling the Sidebar exclusively on mobile devices.

Refer to the below code snippets.

[MainLayout.razor]

 

<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>

<div class="page">

    <div id="wrapper">

        <div>

            @*Initialize the Toolbar component*@

            <SfToolbar Height="45px">

                <ToolbarEvents Clicked="@Toggle"></ToolbarEvents>

                <ToolbarItems>  

                    <ToolbarItem>

                        <Template>

                            <a class="navbar-brand" rel='nofollow' href="#">Responsive offcanvas navbar</a>

                        </Template>

                    </ToolbarItem>

                    @if (activeBreakpoint == "Large" )

                    {

                        <ToolbarItem CssClass="allitems">

                            <Template>

                                <a class="nav-link active" aria-current="page" rel='nofollow' href="#">Home</a>

                                <a class="nav-link" rel='nofollow' href="#">Link</a>

                                <SfDropDownButton Content="Dropdown" CssClass="dropdownbtn">

                                    <DropDownMenuItems>

                                        <DropDownMenuItem Text="Action"></DropDownMenuItem>

                                        <DropDownMenuItem Text="Another action"></DropDownMenuItem>

                                        <DropDownMenuItem Text="Something else here"></DropDownMenuItem>

                                    </DropDownMenuItems>

                                </SfDropDownButton>

                                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

                                <button class="btn btn-outline-success" type="submit">Search</button>

                            </Template>

                        </ToolbarItem>

                    }

                    else if (activeBreakpoint == "Small")

                    {

                        <ToolbarItem PrefixIcon="e-tbar-menu-icon tb-icons" TooltipText="Menu"></ToolbarItem>

                    }

                   

                </ToolbarItems>

            </SfToolbar>

        </div>

        <SfSidebar @ref="sidebarObj" Type="SidebarType.Over" Position="SidebarPosition.Right" @bind-IsOpen="SidebarToggle">

            <ChildContent>

                <div>

                    <h2>Sidebar</h2>

                    <button class="e-close" @onclick="Close">Close the Sidebar</button>

                </div>

            </ChildContent>

        </SfSidebar>

 

            <div class="text-content e-main-content" style="text-align: center;width:100%;">@Body</div>

    </div>

</div>

@code {

    private string activeBreakpoint { get; set; }

    protected override void OnInitialized()

    {

        SfMediaQuery.Small.MediaQuery = "(max-width: 990px)";

        SfMediaQuery.Large.MediaQuery = "(min-width: 1000px)";

        base.OnInitialized();

    }

    SfSidebar? sidebarObj;

    public bool SidebarToggle = false;

    // Specifies the event handler for Clicked event in Toolbar component.

    public void Toggle(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.TooltipText == "Menu")

        {

            SidebarToggle = !SidebarToggle;

        }

    }

    void Close()

    {

        SidebarToggle = false;

    }

}

For your reference, we have attached the sample. Check out the shared sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SidebarSample_b7a8463b.zip