Appbar across screen

[Amjad Khan]

I am using the Appbar component and the Sidebar component. I want the Appbar to appear at the top, across the screen and the Sidebar below that. However, my Sidebar pushes the Appbar to the right and takes its space from the left side of the screen. Here is the code I am using.

<main>

                <div class="control-container" style="width:100%">

            <sfappbar colormode="AppBarColor.Primary">

                <sfbutton cssclass="e-inherit" iconcss="e-icons e-menu"></sfbutton>

                <span class="regular">NDMA</span>

                <appbarspacer></appbarspacer>

                <sfbutton cssclass="e-inherit" content="Login"></sfbutton>

            </sfappbar>

        </div>

        <sfsidebar htmlattributes="@HtmlAttribute" target=".main-content" width="220px" docksize="50px" enabledock="true" @bind-isopen="SidebarToggle" type="@SidebarType.Auto">

            <childcontent>

                <div class="main-menu">

                    <div>

                        <div style="text-align: center;" class="text-content"> Sidebar </div>

                        @*<sfmenu cssclass="dock-menu" items="@MainMenuItems" orientation="@VerOrientation"></sfmenu>*@

                    </div>

                </div>

            </childcontent>

        </sfsidebar>

        <article class="content px-4">

            @Body

        </article>

    </main><p>

I want to have the Appbar at the top across the screen like this and the sidebar below:

-------------Appbar-------------

------------------------------------

---------Sidebar------

                              |

                              |

--------------------------

Instead, my Appbar comes out like this:

---------Sidebar------ ---------------Appbar-----------

                              |------------------------------------

                              |

--------------------------

[Vijay Ravi]

Hi Amjad,

In your shared sample code you used the main-content as your sidebar target. You can achieve your requirement with the help of adding a div element with a class name of main-content class as shown in the below code snippet.

[index.razor]

<div>

    <div class="control-container" style="width:100%">

        <SfAppBar ColorMode="AppBarColor.Primary">

            <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>

            <span class="regular">Blazor AppBar</span>

            <AppBarSpacer></AppBarSpacer>

            <SfButton CssClass="e-inherit" Content="Login"></SfButton>

        </SfAppBar>

    </div>

    <div class="main-content" style="height:350px"></div>

   

</div>

<SfSidebar Width="260px" Target="@Target" Position="@Position" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle">

    <ChildContent>

        <div style="text-align: center;" class="text-content">Sidebar</div>

        @*<sfmenu cssclass="dock-menu" items="@MainMenuItems" orientation="@VerOrientation"></sfmenu>*@

    </ChildContent>

</SfSidebar>

Regards,

Vijay Ravi

Attachment: appBar_component_with_sideBar_component_209ecb9.zip