MainLayout.razor

@inherits LayoutComponentBase

<ThemeSwitcher>
    <StylesheetLinkContainer>
        <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
        <link href="@context.CurrentThemeUrl" rel="stylesheet" />
        <div class="main">
            @context.ToggleButton
            <div id="settingsbar" class="@(context.ThemesSelectorVisible ? "" : "hidden-settings-bar")">
            @context.ThemesSelectorContainer
        </div>
            <div class="content px-4">
                @Body
            </div>
        </div>
    </StylesheetLinkContainer>
    <ToggleButton>
        <div align="right" class="theme-settings @context.ThemesSelectorVisible">
            <a class="nav-item nav-link" @onclick="@context.ToggleThemesContainer" href="javascript:void(0);">
                <span class="oi oi-cog"></span>
            </a>
        </div>
    </ToggleButton>
    <ThemesSelectorContainer>
        <nav id="themesMenu">
            @context.ThemesSelectorView
        </nav>
    </ThemesSelectorContainer>
</ThemeSwitcher>