DevExpress-Examples · elenapeskova · Jun 25, 2025 · Apr 22, 2025 · Apr 23, 2025 · Apr 25, 2025
@@ -18,20 +18,11 @@ Global
 		{84CEBC50-4513-490B-B138-2994138270BC}.DebugWasm|Any CPU.Build.0 = Debug|Any CPU
 		{84CEBC50-4513-490B-B138-2994138270BC}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{84CEBC50-4513-490B-B138-2994138270BC}.Release|Any CPU.Build.0 = Release|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.DebugWasm|Any CPU.ActiveCfg = DebugWasm|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.DebugWasm|Any CPU.Build.0 = DebugWasm|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{621D779C-2600-4885-A43C-C4300AA0EA56}.Release|Any CPU.Build.0 = Release|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.DebugWasm|Any CPU.ActiveCfg = Debug|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.DebugWasm|Any CPU.Build.0 = Debug|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{911173B4-D12E-4303-81D2-7E508B112B0D}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {AF364D91-A63D-4089-B357-568F6CA2D0D7}
+	EndGlobalSection
 EndGlobal
@@ -0,0 +1,38 @@
+@using Microsoft.AspNetCore.Mvc.ViewFeatures
+@using DevExpress.Blazor
+@inject IHttpContextAccessor HttpContextAccessor
+@inject IFileVersionProvider FileVersionProvider
+@inject ThemesService ThemesService
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+
+    <script src=@AppendVersion("switcher-resources/js/cookies-manager.js")></script>
+    <link href=@AppendVersion("switcher-resources/theme-switcher.css") rel="stylesheet" />
+
+    @DxResourceManager.RegisterTheme(InitialTheme)
+
+    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
+    <link href=@AppendVersion("switcher.styles.css") rel="stylesheet" />
+
+    <HeadOutlet @rendermode="InteractiveServer" />
+</head>
+<body>
+    <Routes @rendermode="InteractiveServer" />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
+
+@code {
+    private ITheme InitialTheme;
+    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
+
+    protected override void OnInitialized() {
+        InitialTheme = ThemesService.GetThemeFromCookies(HttpContextAccessor);
+    }
+}
@@ -0,0 +1,47 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+
+<div>
+    <DxDrawer PanelWidth="@Width"
+              CssClass="@(CssClass + " mobile")"
+              Mode="@DrawerMode.Overlap"
+              IsOpen="@ToggledSidebar"
+              HeaderTemplate="@DrawerHeader"
+              FooterTemplate="@DrawerFooter"
+              ApplyBackgroundShading="false"
+              ClosedCssClass="panel-closed">
+        <BodyTemplate>
+            @DrawerBody
+        </BodyTemplate>
+        <TargetContent>
+            <DxDrawer PanelWidth="@Width"
+                      CssClass="@CssClass"
+                      Mode="@DrawerMode.Shrink"
+                      IsOpen="@(!ToggledSidebar)"
+                      HeaderTemplate="@DrawerHeader"
+                      FooterTemplate="@DrawerFooter"
+                      OpenCssClass="panel-open">
+                <BodyTemplate>
+                    @DrawerBody
+                </BodyTemplate>
+                <TargetContent>
+                    <div class="navigation-drawer-shading"/>
+                    @DrawerTarget
+                </TargetContent>
+            </DxDrawer>
+        </TargetContent>
+    </DxDrawer>
+</div>
+
+@code {
+    string Width => "240px";
+    string CssClass => "navigation-drawer";
+
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+
+    [Parameter] public RenderFragment? DrawerTarget { get; set; }
+    [Parameter] public RenderFragment? DrawerBody { get; set; }
+    [Parameter] public RenderFragment? DrawerHeader { get; set; }
+    [Parameter] public RenderFragment? DrawerFooter { get; set; }
+}
@@ -0,0 +1,86 @@
+::deep .navigation-drawer {
+    height: 100vh;
+    max-height: 100%;
+}
+
+::deep .panel-open:not(.mobile) .menu-button {
+    display: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    background-image: linear-gradient(180deg, var(--bs-primary, var(--DS-primary-90)) 0%, var(--bs-black, #000) 150%);
+}
+
+::deep .navigation-drawer > .dxbl-drawer-content {
+    height: 100vh;
+    overflow: auto;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header {
+    border-bottom: none;
+    padding: 2rem 1rem;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header > .navigation-drawer-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
+    --dxbl-drawer-panel-body-padding-x: 0;
+    --dxbl-drawer-panel-body-padding-y: 1rem;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer {
+    --dxbl-drawer-panel-footer-justify-content: center;
+    border-top: none;
+    padding-bottom: 1.5rem;
+    width: 240px;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    display: flex;
+}
+
+::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+    display: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    ::deep .panel-open:not(.mobile) .menu-button {
+        display: inline-flex;
+    }
+
+    ::deep .navigation-drawer > .dxbl-drawer-panel {
+        display: none;
+    }
+
+    ::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+        display: flex;
+    }
+
+    ::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
+        background-color: var(--dxbl-drawer-content-shading-bg);
+        display: block;
+        height: 100%;
+        position: absolute;
+        transition: ease var(--dxbl-drawer-animation-duration);
+        transition-property: opacity, visibility;
+        visibility: visible;
+        width: 100%;
+        z-index: 99;
+        opacity: var(--dxbl-drawer-content-shading-opacity);
+    }
+
+    ::deep .navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
@@ -0,0 +1,52 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+
+
+<div class="page">
+    <Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter">
+        <DrawerBody>
+            <div class="w-100">
+                <NavMenu></NavMenu>
+            </div>
+        </DrawerBody>
+        <DrawerTarget>
+            <div class="nav-buttons-container">
+                <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+                    <DxButton RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button" IconCssClass="icon icon-menu"></DxButton>
+                </NavLink>
+                @if (new Uri(NavigationManager.Uri).LocalPath != "/") {
+                    <NavLink href="@UrlGenerator.GetUrl("/", ToggledSidebar)" class="button-link hidden">
+                        <DxButton Text="Back to Home" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="icon icon-back"></DxButton>
+                    </NavLink>
+                }
+                <ThemeSwitcher />
+            </div>
+            <div class="container p-4">
+                @Body
+            </div>
+        </DrawerTarget>
+    </Drawer>
+</div>
+
+@code {
+
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+
+    private RenderFragment drawerHeader => @<div class="navigation-drawer-header">
+        <img class="logo" src="images/logo.svg" alt="DevExpress logo" />
+        <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+            <DxButton RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton>
+        </NavLink>
+    </div>;
+
+    private RenderFragment drawerFooter => @<div>
+        <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
+            <DxButton Text="Docs" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon docs-icon"></DxButton>
+        </NavLink>
+        <NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
+            <DxButton Text="Demos" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon demos-icon"></DxButton>
+        </NavLink>
+    </div>;
+
+}
@@ -0,0 +1,59 @@
+.page {
+    height: 100%;
+    font-family: var(--bs-font-sans-serif, var(--DS-font-family-sans-serif));
+}
+
+.logo {
+    text-align: center;
+}
+
+::deep .icon-back {
+    --icon-mask-image: var(--icon-back-mask-image);
+}
+
+::deep .icon-close {
+    --icon-mask-image: var(--icon-close-mask-image);
+}
+
+::deep .icon-menu {
+    --icon-mask-image: var(--icon-menu-mask-image);
+}
+
+
+::deep .docs-icon {
+    --icon-mask-image: var(--icon-docs-mask-image);
+}
+
+::deep .demos-icon {
+    --icon-mask-image: var(--icon-demos-mask-image);
+}
+
+::deep .footer-button:hover .demos-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .footer-button:hover .docs-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button-nav:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+.panel-open .menu-button {
+    display: inline-flex;
+}
+
+.nav-buttons-container {
+    display: flex;
+    gap: 10px;
+    padding: 1rem;
+}
+
+.nav-buttons-container ::deep .menubutton-float-end {
+    margin-left: auto;
+}
@@ -0,0 +1,9 @@
+<div>
+    <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
+        <Items>
+            <DxMenuItem NavigateUrl="/" Text="Home" CssClass="menu-item" IconCssClass="icon home-icon"></DxMenuItem>
+            <DxMenuItem NavigateUrl="/counter" Text="Counter" CssClass="menu-item" IconCssClass="icon counter-icon"></DxMenuItem>
+            <DxMenuItem NavigateUrl="/weather" Text="Weather" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>
+        </Items>
+    </DxMenu>
+</div>