Ionic side menu
Ionic side menus also consist of multiple directives that help in achieving a layout with one or many side menus. It defines the layout of a section of your app. All the directives for this purpose are defined in this section.
The <ion-side-menus> directive
It is container for the ionSideMenu directive and the main content. A left-side menu, right-side menu, or both can be added to the layout of your app. This directive/element must have at least two children, one should be an <ion-side-menu-content> directive, which will load the views of the app, and one or more <ion-side-menu>.
The different attributes available to be used with this directive are as follows:
The <ion-side-menu> directive
This directive is the place for side menu content. The side menu list view and other content can be included in this directive.
The following is the usage of this directive:
<ion-side-menu side="left" width="200" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
This directive has only three attributes: side for defining the side it will slide from, width to set the width of the side menu container, and is-enabled to set an expression/function to evaluate whether the specific side menu should be enabled or not.
The <ion-side-menu-content> directive
This is the container for the main visible content. It can contain <ion-nav-view> to show different views based on the state changes. It is always a sibling to the ionSideMenu directive.
The following is the usage of this directive:
<ion-side-menu-content edge-drag-threshold="true" drag-content="true"> </ion-side-menu-content>
This directive has two attributes—edge-drag-threshold, which defines whether content drag can be enabled or start below a threshold distance from the edge, and drag-content, which enables whether content inside this directive can be dragged or not.
Other important directives
In order to work with side menus there are some more directives to be used:
menu-closeis an attribute directive that closes a currently opened side menu. This can be used on a link to navigate to a new view, which would close the side menu. It also resets the view's navigation history and removes the back button.menu-toggleis an attribute that can be set on a button or icon used to toggle a side menu. The specific side menu such asleftorright, can be set to this attribute value.expose-aside-whenis an attribute that controls when the side menu should be kept open. In the case of large tablets, the side menu will always be opened. This directive should be given in theionSideMenudirective.