Drawer - a new component for building responsive web app layouts

[dxbykov]

The Problem

Creating a responsive web application layout with navigation bars and collapsible panes is complex and time-consuming.

The Proposed Solution

We are planning to include the new Drawer widget in v18.2. This widget can be used to create responsive and themeable web application layouts. We are also planning to add such layouts to our products.

Below we have listed the features we would like to support in our Drawer. The code examples in this thread are in Angular. However, you can use a similar API with React, Vue and jQuery.

Specifying the main and Drawer pane content

You should wrap content in the Drawer component to add a drawer panel. In this case, the Drawer drops a shadow over the content and change its size or position when opened. The drawer pane’s content is specified via a ‘drawer-pane’ template.

<dx-drawer>
    <div *dxTemplate="let data of 'drawer-pane'">
        Drawer Panel Content
    </div>
   <div>
       Main Content
   </div>
</dx-drawer>

Opening and closing the Drawer

<dx-drawer [opened]="isDrawerOpened">
    <div *dxTemplate="let data of 'drawer-pane'">
        navigation
    </div>
   <div>
       <div (click)="isDrawerOpened = !isDrawerOpened">Toggle navigation menu</div>
   </div>
</dx-drawer>

 export class AppComponent {
   isDrawerOpened: boolean = false;
 }

or using the ‘toggle’ method:

<dx-drawer #drawer>
    <div *dxTemplate="let data of 'drawer-pane'">
        navigation
    </div>
   <div>
       <div (click)="drawer.toggle()">Toggle navigation menu</div>
   </div>
</dx-drawer>

Changing the Drawer position

 <dx-drawer [position]="'left'|'right'">
   ...
 </dx-drawer>

Changing the Drawer open behavior

   <dx-drawer
     [openedStateMode]="'shrink'|'push'|'overlap'"
     [revealMode]="'slide'|'expand'"
   >
       ...
   </dx-drawer>

The ‘openedStateMode’ option values:

• ‘shrink’ - opening the drawer pane shrinks the main content
• ‘push’ - the drawer pane displaces the main content
• ‘overlap’ - the drawer pane overlaps the main content

The ‘revealMode’ option values:

• ‘slide’ - the drawer pane content is sliding during open/close animation
• ‘expand’ - the drawer pane content is static during open/close animation (only the pane width is animating)

Enabling/Disabling the Drawer shading

<dx-drawer [shading]="false">
       ...
</dx-drawer>

Specifying the Drawer pane width

<dx-drawer [width]="200">
       ...
</dx-drawer>

Creating a responsive layout for mobile & desktop

You can use different drawer configuration options depending on the screen size or orientation. For instance, you can implement a persistent navigation pane for desktop applications, and a temporary pane for mobile phones.

You can use the BreakpointObserver from the Angular Component Dev Kit to build apps with Angular. We’ll add an Angular example to this post soon.

Using several drawers at once

You can compose drawers if you need more that one drawer pane in your layout:

<dx-drawer #leftDrawer openedStateMode="overlap">
   <div *dxTemplate="let data of 'drawer-pane'">
       navigation
   </div>
   <dx-drawer #rightDrawer openedStateMode="push" position="right">
       <div *dxTemplate="let data of 'drawer-pane'">
           right panel content
       </div>
       <div>
           <div (click)="leftDrawer.toggle()">Toggle navigation menu</div>
           <div (click)="rightDrawer.toggle()">Toggle right pane</div>
       </div>
   </dx-drawer>
</dx-drawer>

We Need Your Feedback

Take a Quick Poll

Does the new Drawer component meet your needs?

Live Sandbox

Check out the early working prototype

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[jakehockey10]

I know it seems a little out there, but would the drawer be able to work as top and bottom positions as well? Left and right positions are fairly standard ux at this point. I'd be interested in a drawer that could work in all four positions. Bootstrap nav has had a menu that expands from the top for a while now. The bottom drawer could feel similar to the drawer of apps on an Android phone.

I'm looking forward to hearing your thoughts on this

[dxbykov]

Hi @jakehockey10,

Thanks for sharing your feedback. We are considering the capabilities you are talking about. Let me clarify some details. Do you need to implement exactly the same use-cases that you've mentioned? I mean a responsive bootstrap-like navbar (top position) and a popup panel with buttons or custom content (bottom position). These two specific use-cases don't require the 'push' and 'shrink' expand strategies. Such panels usually overlap the underlying content.

P.S. It would also be very helpful if you could share some reference links to the existing solutions that meet your specific needs.

[jakehockey10]

I do not need this functionality for anything specific but considered it when thinking about patterns I've seen in Mobile apps and operating systems. I don't have any specific examples other than the app drawer of all versions of Android.

I think left and right positions work as they've become a standard but when I try to think of which is better than the other I can't really think of good reasons either way. Depends on how big the phone is, which handedness the user is, etc. I've also seen both used to offer site navigation vs. options in the current view. But top and bottom, to me, seem more universally accessible and thought I'd throw the suggestion out there.

Thanks KS for taking the time to respond, and I wish I had more to offer you! Please keep up the good work!

[jakehockey10]

I found something pretty similar to what I was thinking for the bottom position here: https://material.io/design/components/app-bars-bottom.html# and here: https://material.io/design/components/navigation-drawer.html#navigation-drawer

[dxbykov]

Thanks for the clarification and links. We'll take all this information into consideration.

[bobskigit]

Is there a angular beta that can be used to play with?

[bobskigit]

The Angular support doesn't appear to work as yet, no drawer items using examples or code below

<dx-drawer [position]="'left'" [minWidth]="50" [maxWidth]="200" revealMode="slide" openedStateMode="'overlap'" [opened]="isDrawerOpened"
[shading]="false">

{{itemIndex}}

[hakimio]

@bobskigit Angular version does work. I have tested it personally and they have included an example in devextreme-angular repository, but the API has changed since this issue has been opened and you need to use both the latest unstable devextreme version (18.2.1-pre-18239) and the latest unstable devextreme-angular version (18.2.1-beta.2). Also, you are assigning "openedStateMode" incorrectly - you either have to wrap openedStateMode in square brackets or remove single quotes from overlap.

[hakimio]

@dxbykov The new drawer component works nicely. I just have one small suggestion: I think it would make a lot of sense to set default openedStateMode to shrink instead of push, opened to true and shading to false, because that's what the other UI frameworks do (ie Angular Material) and that's what at least I, as a user, expect to be the default behavior.

[bobskigit]

I see the API change now

rather than