Drawer for Blazor - Responsive Drawer in Static SSR Mode

This example implements a responsive drawer when using static SSR mode.

The DevExpress Blazor Drawer component requires interactive render mode to change its IsOpen state. Use one of the following strategies to dynamically change drawer visibility in static SSR mode.

• Add query params to control drawer visibility. This approach is used in ASP.NET Core Blazor Application template within DevExpress Template Kit.
• Specify CSS rules to control drawer visibility (this example).

Implementation Details

This example contains two nested instances of the DevExpress Blazor Drawer (DxDrawer) component. The first (external) drawer is configured for use on desktop devices - the second (internal) drawer is configured for use on mobile devices (less than 769px).

<DxDrawer PanelWidth="240px" CssClass="navigation-drawer" Mode="@DrawerMode.Shrink" IsOpen="@true" >
    <BodyTemplate>
        @DrawerBody
    </BodyTemplate>
    <TargetContent>
        <DxDrawer PanelWidth="240px" CssClass="navigation-drawer mobile" Mode="@DrawerMode.Overlap" IsOpen="@true">
            <BodyTemplate>
                @DrawerBody
            </BodyTemplate>
            <TargetContent>
                @DrawerTarget
            </TargetContent>
        </DxDrawer>
    </TargetContent>
</DxDrawer>

Users can click a checkbox element to open or close the drawer.

<input type="checkbox" title="Toggle Nav" class="navbar-toggler icon icon-menu menu-button" checked />

The CSS file (MainLayout.razor.css) specifies rules to open or close the drawer based on viewport size and checkbox state.

/* Display the first drawer (for desktop) */
::deep .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}
/* Collapse or expand the first drawer based on the toggle button state */
::deep.page:has(.navbar-toggler:not(:checked)) .navigation-drawer:not(.mobile) > .dxbl-drawer-panel {
    width: 0 !important;
}
/* Hide the second drawer (for mobile) */
::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the first drawer (for desktop) */
    ::deep .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }
    /* Display the second drawer (for mobile) */
    ::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }
    /* Collapse or expand the second drawer based on the toggle button state */
    ::deep.page:has(.navbar-toggler:checked) .navigation-drawer.mobile > .dxbl-drawer-panel {
        width: 0 !important;
    }
}

Files to Review

• MainLayout.razor
• NavMenu.razor
• Drawer.razor
• MainLayout.razor.css

Documentation

• DxDrawer class

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)