drawer-small-screen.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Put the Drawer in MiniMode on small screens	How to put the Drawer in MiniMode on small screens.	how-to	Put the Drawer in MiniMode on small screens	drawer-kb-minimode-smallscreens			1558952	kb

Environment

Product

Drawer for Blazor

Description

I would like to put the Drawer in MiniMode on small screens. This behavior would be great for mobile devices.

Solution

1. The Blazor application has to be aware of the current browser width. One way to achieve this is to use the TelerikMediaQuery component.
2. Use the MediaQuery OnChange event to put the Drawer in MiniMode.

caption Put the Drawer in MiniMode on small screens

@* This example assumes that a max-width of 767px as a suitable match for a small screen size. You can adjust that value as needed in your application.
To see the behavior, resize the browser window *@

<TelerikMediaQuery Media="(max-width: 767px)" 
                   OnChange="@OnChangeSmallScreenHandler">
</TelerikMediaQuery>

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>

<TelerikDrawer Data="@Data"
               MiniMode="@isSmallScreen"
               Mode="@DrawerMode.Push"
               @ref="@DrawerRef">
</TelerikDrawer>

@code {
    private bool isSmallScreen { get; set; }

    private void OnChangeSmallScreenHandler(bool doesMatch)
    {
        //Triggers MiniMode on Small screens
        isSmallScreen = doesMatch;

        //Alternatively, you can use the CollapseAsync() method
        //exposed on the TelerikDrawer @ref

        //await DrawerRef.CollapseAsync();
    }


    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus},
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout},
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}