How to make the whole Blazor Server project RTL?

[Fardin]

I'm using Syncfusion in my Blazor server app. I want to make the whole application to take RTL mode. The sidebar is LTR. When I try to use EnableRtl="true" in <SfSidebar> tag, the sidebar does not come to the right side and its content does not take a good position and look:

The MainLayout code is as follows:

<SfSidebar ID="Sidebar" EnableRtl="true" Type="SidebarType.Push" Width="300px" DockSize="65px" EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle">
    <div class="sidebar" style="position:fixed;z-index:1200">
        <div class="topnav navbar navbar-dark">
            <button class="navbar-toggler" @onclick="ToggleNavMenu" />
            <a class="navbar-brand" rel='nofollow' href=""><span class="displayText" style="margin-right:30px">TestProject</span></a>
        </div>
        <div @onmouseover="MouseIn" @onmouseout="MouseOut">
            <NavMenu />
        </div>
    </div>
</SfSidebar>


<div class="main">
    <div class="top-row px-4" style="z-index:1111;padding-top:0px">
        <a rel='nofollow' href="https://www.syncfusion.com/blazor-components/" target="_blank">Blazor Components</a>
        <a rel='nofollow' href="https://blazor.syncfusion.com/documentation/" target="_blank">User Guide</a>
        <a rel='nofollow' href="http://blazor.syncfusion.com/" target="_blank">View Demos</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
<style>
    .sidebar {
        width: 300px;
        min-width: 300px;
    }

    .navbar-toggler {
        display: inline-block;
        border: none;
        width: 24px;
        height: 24px;
        margin-left: 30px;
        background-image: url('images/ToggleButton.png');
        background-color: #05163C;
        transform: scale(0.75);
        transform-origin: left;
        color: #ffffff;
    }


    /* Content area styles */
    .title {
        font-size: 20px;
    }

    /* Sidebar styles */
    .e-sidebar .e-icons::before {
        font-size: 25px;
    }

    .e-sidebar:hover .e-open {
        display: inline-block;
    }

    .e-sidebar:hover .e-close {
        display: none;
    }
    /* dockbar icon Style */
    .e-sidebar .home::before {
        content: '\e102';
    }

    .e-sidebar .profile::before {
        content: '\e10c';
    }

    .e-sidebar .info::before {
        content: '\e11b';
    }

    .e-sidebar .settings::before {
        content: '\e10b';
    }

    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
    }

    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
    }

    /* end of dockbar icon Style */

    .e-sidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .e-sidebar.e-dock.e-close .navbar-toggler {
        margin-left: 21px;
    }

    .e-sidebar.e-dock.e-close .nav.flex-column {
        margin-left: -8px;
    }

    .e-sidebar.e-dock.e-close .displayText {
        display: none;
    }

    .e-sidebar.e-dock.e-close .nav-item.px-3 {
        width: 80px;
    }

    .e-sidebar.e-dock.e-close .separator {
        border: 1px solid #FFFFFF;
        opacity: 0.14;
        width: 45px;
        margin: 1rem;
        margin-top: 0px;
        margin-left: 0.5rem;
    }

    .e-sidebar.e-dock.e-close .oi.oi-home {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-close .syncfusion-blazor-icons {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .e-sidebar li {
        list-style-type: none;
        cursor: pointer;
    }

    .e-sidebar ul {
        padding: 0px;
    }


    .e-sidebar span.e-icons {
        color: #c0c2c5;
        line-height: 2
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        font-size: 15px;
    }

    .sidebar-item {
        text-align: center;
        border-bottom: 1px #e5e5e58a solid;
    }

    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #c0c2c5;
    }

    .e-sidebar {
        background: #2d323e;
        overflow: hidden;
    }

    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset= . . . . //some font data here
        font-weight: normal;
        font-style: normal;
    }

    /* end of sidebar styles */
</style>

@code
{
#if NETCOREAPP3_1 || NETSTANDARD2_1
    SfSidebar Sidebar;
#else
    SfSidebar? Sidebar;
#endif
    public bool SidebarToggle = false;
    public bool SidebarToggleFixed = false;
    public void ToggleNavMenu()
    {
        SidebarToggle = !SidebarToggle;
        SidebarToggleFixed = !SidebarToggleFixed;
    }
    public async Task MouseIn(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
        if (!SidebarToggle && isSidebar)
        {
            SidebarToggle = true;
        }
    }
    public async Task MouseOut(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
        if (SidebarToggle && !isSidebar)
        {
            if (!SidebarToggleFixed)
            {
                SidebarToggle = false;
            }
        }
    }
}

How can I make the sidebar RTL (Position in the right side of the page and a proper look).

[Sivakumar ShunmugaSundaram]

Hi Fardin,

Greetings from Syncfusion support.

With the shared details, you are facing an issue with implementing Blazor Sidebar in right to left position. We would like to let you know that setting the EnableRtl property as true will only make the content inside the Sidebar an RTL position. So, to achieve your requirement, you just need to set the Sidebar Position property as “Right” as mentioned below.

Refer to the below code snippet.

[Index.razor],

 

<SfSidebar Width="250px" @bind-IsOpen="@toggle" ID="def" CloseOnDocumentClick=true EnableRtl=true Position="SidebarPosition.Right">

    <ChildContent>

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

   <div class="container">

    <div class="bottom-element">This element will be at the bottom of the container</div>

</div>

    </ChildContent>

</SfSidebar>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1983953497.zip

Check out the shared sample for your reference.