DevExpress-Examples · khamlyuk · Apr 29, 2026 · Apr 29, 2026
@@ -2,25 +2,28 @@
 @inject IFileVersionProvider FileVersionProvider
 
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-
+    @DxResourceManager.RegisterTheme(ActiveTheme)
     @DxResourceManager.RegisterScripts()
-    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => properties.AddFilePaths($"css/theme-fluent.css")))
     <link href=@AppendVersion("css/site.css") rel="stylesheet" />
     <link href=@AppendVersion("GetStartedWithTreeList.styles.css") rel="stylesheet" />
-    <HeadOutlet />
+    <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body>
-    <Routes></Routes>
+    <Routes @rendermode="InteractiveServer" />
     <script src="_framework/blazor.web.js"></script>
 </body>
-
 </html>
 
-@code{
+@code {
+    static readonly ITheme ActiveTheme = Themes.Fluent.Clone(properties => {
+        properties.Mode = ThemeMode.Light;
+    });
+
     private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
-}
+
+}
@@ -1,34 +1,38 @@
-@using GetStartedWithTreeList.Services
-@inherits LayoutComponentBase
-@inject NavigationManager NavigationManager
+@inherits DrawerStateComponentBase
 
-<div>
-    <DxDrawer PanelWidth="@Width" CssClass="@(CssClass + " mobile")" Mode="@DrawerMode.Overlap" IsOpen="@ToggledSidebar" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" ApplyBackgroundShading="false" ClosedCssClass="panel-closed">
-        <BodyTemplate>
-            @DrawerBody
-        </BodyTemplate>
+<div class="drawer-container">
+    <DxDrawer PanelWidth="@PanelWidth"
+              CssClass="@(CssClass + " mobile")"
+              Mode="DrawerMode.Overlap"
+              IsOpen="@ToggledDrawer"
+              BodyTemplate="BodyTemplate"
+              HeaderTemplate="HeaderTemplate"
+              FooterTemplate="FooterTemplate"
+              ApplyBackgroundShading="false"
+              ClosedCssClass="panel-closed">
         <TargetContent>
-            <DxDrawer PanelWidth="@Width" CssClass="@CssClass" Mode="@DrawerMode.Shrink" IsOpen="@(!ToggledSidebar)" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" OpenCssClass="panel-open" >
-                <BodyTemplate>
-                    @DrawerBody
-                </BodyTemplate>
+            <DxDrawer PanelWidth="@PanelWidth"
+                      CssClass="@CssClass"
+                      Mode="DrawerMode.Shrink"
+                      IsOpen="@(!ToggledDrawer)"
+                      BodyTemplate="BodyTemplate"
+                      HeaderTemplate="HeaderTemplate"
+                      FooterTemplate="FooterTemplate"
+                      OpenCssClass="panel-open">
                 <TargetContent>
-                    <div class="shading-copy" />
-                    @DrawerTarget
+                    <div class="navigation-drawer-shading"></div>
+                    @TargetContent
                 </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; }
+    [Parameter] public string? CssClass { get; set; }
+    [Parameter] public string? PanelWidth { get; set; }
+    [Parameter] public RenderFragment? TargetContent { get; set; }
+    [Parameter] public RenderFragment? BodyTemplate { get; set; }
+    [Parameter] public RenderFragment? HeaderTemplate { get; set; }
+    [Parameter] public RenderFragment? FooterTemplate { get; set; }
 }
@@ -1,40 +1,21 @@
-::deep .navigation-drawer {
-    --dxbl-drawer-panel-footer-justify-content: center;
-    height: 100vh;
-    max-height: 100%;
+.drawer-container {
+    height: 100%;
 }
 
-::deep .navigation-drawer > .dxbl-drawer-panel {
-    background-image: linear-gradient(180deg, var(--dxds-primary-90) 0%, #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 {
+.navigation-drawer-shading {
+    height: 100%;
+    position: absolute;
+    transition: ease 300ms;
+    transition-property: opacity, visibility;
+    visibility: visible;
     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;
+    z-index: 99;
+    background-color: var(--dxds-color-surface-backdrop-default-rest);
 }
 
-::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer {
-    --dxbl-drawer-panel-footer-justify-content: center;
-    border-top: none;
-    padding-bottom: 1.5rem;
-    background: none;
+.navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
+    opacity: 0;
+    visibility: hidden;
 }
 
 ::deep .navigation-drawer > .dxbl-drawer-panel {
@@ -45,7 +26,11 @@
     display: none;
 }
 
-::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
+.navigation-drawer-shading {
+    display: none;
+}
+
+::deep .panel-open:not(.mobile) .nav-buttons-container .menu-button {
     display: none;
 }
 
@@ -58,39 +43,11 @@
         display: flex;
     }
 
-    ::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
+    .navigation-drawer-shading {
         display: block;
     }
-}
 
-::deep .panel-open:not(.mobile) .menu-button {
-    display: none;
-}
-
-@media (max-width: 768px) {
-    ::deep .panel-open:not(.mobile) .menu-button {
-        display: inline-flex;
-    }
-
-    .mobile-drawer-closed .shading-copy {
-        display: none;
-        visibility: hidden;
-    }
-
-    ::deep .shading-copy {
-        background-color: var(--dxbl-drawer-content-shading-bg);
-        height: 100%;
-        position: absolute;
-        transition: opacity ease var(--dxbl-drawer-animation-duration);
-        visibility: visible;
-        width: 100%;
-        z-index: 99;
-        opacity: var(--dxbl-drawer-content-shading-opacity);
-    }
-
-    ::deep .panel-open .shading-copy {
-        opacity: 0;
-        visibility: unset;
-        height: unset;
+    ::deep .panel-open:not(.mobile) .nav-buttons-container .menu-button {
+        display: flex;
     }
-}
+}
@@ -1,51 +1,53 @@
-@inherits LayoutComponentBase
-@using GetStartedWithTreeList.Services
+@inherits DrawerStateLayoutComponentBase
 @inject NavigationManager NavigationManager
 
 <div class="page">
-    <Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter">
-        <DrawerBody>
+    <Drawer CssClass="navigation-drawer" PanelWidth="240px">
+        <HeaderTemplate>
+            <div class="navigation-drawer-header">
+                <NavLink href="@AddDrawerStateToUrl("/")">
+                    <img class="logo" src="images/logo.svg" alt="DevExpress logo" />
+                </NavLink>
+                <NavLink aria-label="Close menu" href="@AddDrawerStateToUrlToggled(LocalPath)">
+                    <DxButton aria-label="Close menu" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="btn-icon-only" IconCssClass="@(ToggledDrawer ? "icon icon-close" : "icon icon-menu")"></DxButton>
+                </NavLink>
+            </div>
+        </HeaderTemplate>
+        <BodyTemplate>
             <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 RenderStyle="@(ButtonRenderStyle.Dark)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button" IconCssClass="icon icon-menu"></DxButton>
+        </BodyTemplate>
+        <FooterTemplate>
+            <div class="navigation-drawer-footer">
+                <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
+                    <DxButton Text="Docs" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" IconCssClass="icon icon-docs"></DxButton>
+                </NavLink>
+                <NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
+                    <DxButton Text="Demos" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" IconCssClass="icon icon-demos"></DxButton>
                 </NavLink>
-                @if (new Uri(NavigationManager.Uri).LocalPath != "/") {
-                    <NavLink href="@UrlGenerator.GetUrl("/", ToggledSidebar)" class="button-link hidden">
-                        <DxButton RenderStyle="@(ButtonRenderStyle.Dark)" Text="Back to Home" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="icon icon-back"></DxButton>
-                    </NavLink>
-                }
             </div>
-            <div class="p-4">
-                @Body
+        </FooterTemplate>
+        <TargetContent>
+            <div class="drawer-content">
+                <div class="nav-buttons-container">
+                    <NavLink aria-label="Open menu" href="@AddDrawerStateToUrlToggled(LocalPath)" class="menu-button">
+                        <DxButton aria-label="Open menu" RenderStyle="ButtonRenderStyle.Secondary" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="btn-icon-only" IconCssClass="icon icon-menu"></DxButton>
+                    </NavLink>
+                    @if (LocalPath != "/") {
+                        <NavLink href="@AddDrawerStateToUrl("/")" class="button-link">
+                            <DxButton Text="Back to Home" RenderStyle="ButtonRenderStyle.Secondary" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="back-button" IconCssClass="icon icon-back"></DxButton>
+                        </NavLink>
+                    }
+                </div>
+                <div class="page-content-container">
+                    @Body
+                </div>
             </div>
-        </DrawerTarget>
+        </TargetContent>
     </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 RenderStyle="@(ButtonRenderStyle.Light)" 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>;
-
-
+    string LocalPath => new Uri(NavigationManager.Uri).LocalPath;
 }