Build a Sidebar Layout with Ionic

[00:00] In this lesson, we are going to learn how to create a proper Ionic sidebar as well as a nav bar. This is going to consist of us refactoring the application and introducing some interesting Ionic directives. Just to get started, let's serve up the application and see what we're working with.

[00:24] Let's hop back into the code. Let's delete this entire block of HTML. We're going to replace it with first and foremost an Ionic side menus directive. Ionic side menus is a container element for side menus and the main content. We'll go ahead and add an attribute directive called enable menu with back views. We'll set that to true. Basically, we just want this menu to be available all the time.

[01:03] Now let's go ahead and define our side menu. We'll go with Ion Side Menu. Let's set the side to left. From here, we are going to add in one more directive called Ion nav view.

[01:26] We're going to give this a name of categories. Ionic is built on top of UI Router. Ion nav view is essentially the extension of that. So it works very much like UI Router, in that the categories template will go into the Ion nav view with the name of categories.

[01:47] We'll go ahead and then add in Ion side menu content, which is the container for the main visible content. This is where we're going to put our nav bar. So we'll add in Ion nav bar.

[02:06] Let's go ahead and add a class to set the color of the nav bar. We'll go with bar calm. Let's add in one more Ion nav view. We'll give this a name of bookmarks, because this is where we want our bookmarks template to be loaded.

[02:25] From here, let's hop into the browser. Refresh and you can see we have our nav bar, our content. You can drag from left to right and see the sidebar as well as some transitions.

[02:37] Let's go ahead and refactor the categories template. From here, let's go ahead and add in Ion view. This is just a container for view content in any navigational or header bar information.

[02:51] From here, let's add in Ion content. This is just a fairly simple directive that allows us to handle scrolling by either handing it off to Ionic or just going with the default content overflow.

[03:04] Now we're going to refactor this anchor tag here. That is pointing to home. We'll add this class onto the actual anchor tag itself. Then we're going to refactor this list to use Ion list.

[03:24] Then we are going to delete the nav bar class on this. We no longer need it. Then, let's replace these list items with Ion item. Now we are deferring our list to these Ion directives.

[03:46] From here, we're going to get rid of this ng class. We no longer need this. We'll start to refactor out this anchor tag here. Let's pull up UI sref into the Ion item so the entire thing is clickable. Let's add in UI sref active. We'll set the active class on that.

[04:15] We'll go ahead and just add a blank href attribute so that it works as expected in the browser. From here, let's go ahead and delete the anchor tag. We no longer need it.

[04:29] Let's hop in and refresh the browser. We'll just see the updated UI for our changes. It looks approximately the same, but it's just a little cleaner. It would be nice when you click on these category elements if the sidebar would actually close.

[04:49] That's actually pretty easy using the menu close attribute directive. Let's go ahead and add this to the logo anchor tag as well as our Ion items.

[05:09] Let's refresh the page. We'll pull this open. When you click exercise, you can see that the nav bar closes or the sidebar rather. When you click on the logo, the sidebar closes as well.

[05:23] Now it's time to refactor our bookmarks template. We'll go ahead and chop that out for the moment. Let's add Ion view. From here, we're going to add in Ion content. We'll paste this in.

[05:49] From here, I'm just going to add cache view = false. So Ionic tries to cache these views. In my case, I was having some troubles with that. So I'm just going to set this to re-instantiate the controller every single time this is loaded.

[06:07] From here, we're going to add in a nav button here. So we'll go Ion nav buttons. So we will set side to primary, which is going to determine how the button is set depending on the platform that you're targeting. From here, we're just going to add in a navigation button. We'll give it the appropriate classes and the special sauce which is the Ion nav icon.

[06:49] We'll add on the menu toggle attribute directive. We're going to set this to left. So when we click on this, it will toggle the left navigation menu. Let's refresh the page. Now you can see that when we click it, it toggles the menu on the left.

[07:10] That would be also nice if we could see the current category that we are in in the nav bar, so we're going to go ahead and add in a view title directive. We're going to bind this to a property on our controller called title.

[07:33] Let's go ahead and just add this to our bookmarks list controller. We'll go bookmarks list controller.title. We'll just pull this off of the state params. If the category state param does not exist, we'll just set this to bookmarks.

[07:54] Let's hop back into our browser and see how this works. You can see now bookmarks. Let's go ahead and select a category. You can see that it was updated.

[08:08] Now that we have that working, let's go ahead and update our CSS just to make it a bit cleaner. We're going to update the logo class and add in some additional padding. Then we're going to take a quick run through the stylesheet and delete a bunch of classes that we no longer need because Ionic is handling it.

[08:29] Then we're going to add in one more additional set of styles for the side menu so it looks a little closer to the original Eggly. We'll paste that in now.

[08:37] Let's refresh the page. Now you can see it is a darker color. This is how you add in a side menu and a nav bar into your Ionic application.