DevExpress-Examples · S0rax · Apr 22, 2025 · Apr 23, 2025 · Apr 25, 2025 · Apr 25, 2025
@@ -0,0 +1,52 @@
+@using System.Text.Json
+@using Microsoft.AspNetCore.Mvc.ViewFeatures
+@inject IHttpContextAccessor HttpContextAccessor
+@inject IFileVersionProvider FileVersionProvider
+@inject DxThemesService ThemesService
+@inject SizeModeService SizeModeService
+
+@{
+    var storedSizeMode = HttpContextAccessor.HttpContext?.Request.Cookies[SizeModeService.SizeModeCookieKey];
+    var storedThemeName = HttpContextAccessor.HttpContext?.Request.Cookies[DxThemesService.ThemeCookieKey];
+    var storedThemeState = HttpContextAccessor.HttpContext?.Request.Cookies[DxThemesService.ThemeStateCookieKey];
+    var themeState = new ThemeState();
+    if(storedThemeState != null)
+        themeState = JsonSerializer.Deserialize<ThemeState>(storedThemeState);
+
+    SizeModeService.Initialize(storedSizeMode);
+    ThemesService.SetActiveThemeByName(storedThemeName);
+    ThemesService.SetThemeState(themeState);
+
+    var theme = ThemesService.ActiveTheme.ApplyStoredState(themeState);
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <base href="/"/>
+    @foreach (string style in theme.GetStyles()){
+        <style data-theme-id="@theme.Name">
+            @style
+        </style>
+    }
+
+    @foreach (string path in theme.GetFilePaths()){
+        <link rel="stylesheet" href="@path" data-theme-id="@theme.Name"/>
+    }
+    <link href="switcher-resources/theme-switcher.css" rel="stylesheet"/>
+    <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 string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
+}
@@ -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,53 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+
+<SizeModeContainer>
+    <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>
+</SizeModeContainer>
+
+@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>