In the previous lecture, we learned about how we can make our Ionic application automatically adapt to different screen sizes. And one of the tools available for us is the use of Ionic split pane support. Now in this exercise, we'll explore the use of Ionic split pane support in our Ionic application and see how we can redesign our Ionic application to make use of the split pane support to automatically adapt to different screen sizes. So as we realized, when you look at your Ionic application in a normal Ionic Lab View as you see here, you see that the rendering of the application in the mobile device screen widths is pretty good. But, however, we can also view the Ionic application as if it is being rendered on a larger screen by simply going to the browser and then using the localhost:8100 to directly see the complete View of our Ionic application in the browser. So, if I view our application on the browser, this is what it looks like on a large-screen browser. And obviously, as you realize, the screen real estate is not being effectively used for our Ionic application. For that matter, let me switch on the responsive view. So to use the response view, as you have seen in the previous courses of the specialization, we turn on the Developer Tools, and then in the Developer Tools, right at the left corner, you see this toggle device toolbar. Click on that and then you'll be able to see the View of our application as rendered on different screen sizes. This is what your application looks like under its normal size on a standard iPad, so at 100% of the size. And then if you're looking at it in the portrait more, this is what it looks like. It's not terrible but, still, we can work to improve it further. Of course, we realize that the side menu is always available for us. And if you look at the same View on a smaller screen, like a Galaxy S5, the view looks reasonably good for us and so, you know, it looks quite acceptable size both in the portrait and the landscape mode. How about for larger screen size like, for example, the iPad Pro in landscape mode and in portrait mode? So, we definitely realize that there is scope for improving this and that's where the use of the Ionic split pane enables us to redesign our application. To use split pane in our Ionic application, we'll go to the app.html file and we enclose the entire content of the app.html file in ion-split-pane. And going down to the bottom of the page, we'll close off the ion-split-pane element here. And so, this will essentially enclose the whole content into a split pane. One additional change that you need to do is to declare an item as the main. So in here, we have the ion-nav, which is the rootPage, so we will declare this as the main in our split pane. So, thereby, the other one, the ion-menu, becomes the other part of the split play. So, adding in the main attribute to ion-nav here down below, let's save the changes and go and take a look at our application in different screen sizes. Going to our application in the browser, and I'm still using the responsive view from Chrome Developer Tools. So here you see the rendering of the View on a Galaxy S5, and you see the toggling of the site menu and this View in the landscape mode. But let's switch to a larger screen size, like an iPad, and voila. So you can see that the side menu is completely displayed in View here, like this. And when we switch to the portrait more, you can see that the screen real estate is better utilized by using the split pane. So for larger screen widths, you can see the part of the screen width is being used for fixing the side menu in place there. And so you can do navigation directly from the side menu, like this. And the main view is also much better looking with the side menu always present within the View here. And, but of course, when you're switched to a smaller screen width, say, for example, for a Nexus P, the side menu will be automatically become toggleable using this menu button on the top there. So, this is the result of using the split pane. Now that we have achieved that, let's do a few more updates to our application so that the side menu is also looking better with these updates. What we will do in the next step is to add in the restaurant logo and the restaurants name to this side menu at the top so that the side menu looks more interesting than just a list of links here. And also, we will add in some additional CSS classes to enable us to style the side menu a little bit better. Going to my application, in the assets folder, I'm gonna create a new folder and name it as images, and we're gonna store the logo for our restaurant into this images. Now, to get the logo for the restaurant, in the exercise instructions, I have given you the logo.png file. Just download that file and move it into this images folder. So, going to my application in a Windows Explorer or the Finder window in Mac, I'm just going to go and browse down to the Ionic, conFusion, and source assets, and then you see the images folder there. I'm gonna move the logo.png file into this image folder. Here, you see that I have already moved the logo.png file into the images folder and now it becomes available within my Ionic application to make use of in the design of the Views. Going back to my application, in the app.scss file, I can include any SCSS classes that I want to make globally available within my entire Ionic application. So let me add in a few colors in here which I can use to style a few elements. So I'll add in a light gray color, which is ddd, then I will add in a background-dark color, which is 512DA8, then background-light, which is 9575CD, then background-pale, which would be D1C4E9. And I will also add in a CSS class called background-pale where I will set the background-color to background-pale. And, for now, that should be enough to work with, so let me save the changes. In case you want to have your own SCSS classes that you want to make available to your entire Ionic application, this is where you can include them. If you want it to be available only within a specific page, then you include the same into the SCSS file in that specific page – folder. After making that change, I will now go to the app.html file. And in app.html file, to the ion-content that we have here, I'm going to apply the class, background-pale CSS class, that I have defined earlier. Also, to the ion-list, I'm going to add in an ion-list-header and use a text-wrap on this header. And inside this ion-list-header, I'm going to use an ion-thumbnail item-left. And in there, I will include the logo by saying img src='assets/images/logo.png.' And I will also include the name of the restaurant. So let me just copy the name of the restaurant from the ion-title here, paste it in, and close off. So this would display the logo and the name of the restaurant inside my side menu on top of the various list buttons there. Let me also add some color to the ion-list-header here – primary-light – so that it's set apart from the rest of the menu. Saving the changes. Let's go and take a look at our application in the browser. Going to the browser, now when you look at the menu, you can see that you have the restaurant logo and the restaurant name included in the side menu here. And also, you can see that the entire side menu is now pale primary color in the background, and this looks much better than what we had before. Now, taking a look at the same thing on a larger screen, for an iPad Pro, this is what it will look like for an iPad, and viewing it at a much larger size so you can see more clearly that your side menu now has the restaurant logo and the name of the restaurant included there and the menu items here and then of course the main View where the page is being rendered here. Same thing in a landscape mode, you can see the full-fledged View or the side menu and the main page here. So the navigation exactly works just like before, so you can navigate to the various elements just as we have done before, but this is much better-looking View for our application than what we had without using the split pane. With this, we complete this exercise. In this exercise, we have explored the use of Ionic split pane in order to redesign our application's View so that it fits much better on larger screens and automatically adapts to smaller screens where the side menu will be hidden by default and then invoked when we click on the side menu button in the navigation bar. With this, we complete this exercise. This is a good time for you to save all the changes to your Git repository with the message "split pane."
