Create a Native Mobile Side Menu Layout in Ionic 2
Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead.
[00:02] Linear navigations tend to work for a simple app, but sooner or later, you'll want a more complex navigation layout. To solve, Ionic provides a side menu component that we could add to the root component of our app.
[00:14] We'll open our app.html, and next to our ion nav, we'll add an ion menu component. The menu can contain any kind of content, such as an ion content, an ion list, or any valid HTML element. Now, the last thing that the menu needs is to know where the main context of the app will be.
[00:41] We'll add a dynamic property of content. Set its value to main nav. Then on our ion nav, we'll create a local variable of main nav. This will wire the two together.
[01:04] Now, we'll be able to reveal the menu by dragging from the edge of our app, and pulling the menu open. When we click on the outside of our app, the menu will automatically close.
[01:15] Now, what you may have noticed is that, if we pull the menu open, it will actually overlay the entire app. This follows the material design pattern, but if we were to mimic iOS, the menu doesn't move, but the main context of the app does move as you drag it open. This very much follows the iOS design patterns.
[01:35] We can configure the different kind of menus by setting the type property. If we set it to overlay, the menu will be overlaid on top of the main content no matter what platform we're on. If we set the type to reveal, the menu will be stationary, and the main content will move for both platforms.
[02:07] If we don't include the type, Ionic will provide its own settings based on what platform you're on. Now, for most apps with a side menu, it's typical to have some sort of menu button inside of the app's header. To add this, we'll open our home.html, and in the nav bar, we will add an ion buttons.
[02:32] Then we're going to set its side to left. Inside of the ion buttons, we'll create a button, and give it an attribute of ion button. We'll add another attribute of icon-only, and then a directive of menu toggle. To close it out, we'll add an icon inside of the button. Then, set its icon to be menu.
[02:57] Now, when we save, we can click the button in the header, and have the menu open. Now, if we wanted to close the menu when we click the hello item, we'll go to our app.html. On the ion item, we'll attach the directive, menu close. Now, we can toggle the menu and close the menu, all by clicking two buttons.