Drawer

Using this action, you can integrate a navigation drawer into your mobile app, providing users with a convenient way to access various app features and navigation options.

Adding the Drawer Action

1. Add The Action

In the Drawer Action Dropdown, choose whether you want to open a Open drawer, open an end drawer, or close the drawers.

1. Open Drawer (Left Side)

   • Description: This action opens a drawer that slides in from the left side of the screen. It can be used to display navigation menus, settings, or additional content.

   • Use Cases:

     • Main navigation for an application.

     • Displaying filters or settings that the user can modify.

     • Showing contextual information related to the current view.

2. Open End Drawer

   • Description: This action opens a drawer from the right side of the screen. Similar to the left-side drawer, it is used for displaying menus, settings, or additional content, but from the opposite side.

   • Use Cases:

     • Supplementary navigation or options that are secondary to the main content.

     • Tools or utilities that the user might need while interacting with the main content.

     • Quick access to user profile settings or notifications.

3. Close Drawers

   • Description: This action closes any open drawers on the screen, whether they are on the left or right side. It is useful for returning to the main content without distractions.

   • Use Cases:

     • When the user wants to focus solely on the main content.

     • After the user has made selections or viewed information in the drawer and wants to hide it.

     • To declutter the interface and provide a clean view.

Examples of Drawer Usage

• Open Drawer (Left Side Drawer )

  • A common example is the navigation drawer in many mobile apps. It typically contains links to different sections of the app, like Home, Profile, Settings, etc.

• Open End Drawer ( Right Side Drawer)

  • This can be seen in applications where the right drawer might show notifications, chat messages, or additional tools like a text editor's format options.

• Close Drawers

  • Implemented as an overlay or a swipe gesture that allows users to close the drawer by tapping outside of it or swiping it back to its original position.