Implementing SideNavigationController Using Storyboard And CosmicMind/Material

CosmicMind/Material is a third-party open source library, hosted on GitHub, started by Daniel Dahan. It provides lots of support to make your iOS or MacOS apps more beautiful, thus enhances user experience.

Disclaimer: I am new in open source world - therefore in software development too, I respect the contributors and especially Daniel. I meant no offence to this blog post, I have edited my words. It's just that, this library is not for someone noob, like me. I got a huge respect to people contributing to the open source community.

Yesterday, I tried this Material library, my day off. I got a project in the office, and a freelance project too, that both require to implement a Side Menu/Drawer Menu. I got a cool library already for that and successfully implemented it but got an annoying bug that when you swipe the side menu fast, it bounces a bit. My boss saw that and he wants no other library but only Material's SideNavigationController. 

I just spent more than 5 straight hours how to freakin' implement this SideNavCon of Material. They provided samples for both programmatically and storyboard implementation. However, they failed to explain how to include a Navigation Controller. So I went on and try it myself.

Again, here are the problems what I spent 5 damn plus hours on configuring this library.

1. SideNavigationController's sample has no NavigationController.

2. Assigning and a NavigationController to the Main Screen gives you a headache, quite complex at first, since I'm new to Swift.

3. If you assign a NavCon programmatically, you will have a hard time in configuring and adding Bar Button Items. You can try to use CosmicMind/Material's library too in adding Bar Button items but for me it's *annoying, or it is just for me? Cos you have to setup everything, this is not for everyone*. The icons/buttons in your NavBar is not proportional! The best way to add NavBar items is using the Interface Builder, hence the storyboard.

4. And many more, believe me :)  

Let's go ahead and implement the SideNavigationController using Storyboard, but let's keep it they way they implement it in their samples.

First: Make two screens in your storyboard.

You can have both TableViewController or NavigationController, it's up to you.

Second step: Make two classes for those 2 screens.

This step is no brainer. You make two new classes and subclass whatever type of screen you want (e.g TableViewController or ViewController)


Third step: Give them Ids.

Don't forget to assign the two classes you made for them. Checking these "Use Storyboard ID" is optional. It will just allow the Xcode to determine what ID should be used for Identity.

TAKE NOTE: We will skip the part where we will add a button in our main screen. You can just look up to their sample, contact me if you have a problem in running their sample project.

Fourth step: Setting up the SideNavigationController in your AppDelegate.


So as you can in the code snippet, both screens have no navigation controllers. and the side navigation controller or the side menu has no status bar. Now, we're going to the purpose of this blog post: Modifying the sample to put a navigation controller in our main screen using storyboard and prevent the up/down bug when we swipe the side menu.

Now, you embed a Navigation Controller in your main screen. Click on the Root View Controller screen and click the EDITOR at the top of your Xcode and EMBED IN -> Navigation Controller.


Next, click the newly embedded Navigation Controller and assign a Storyboard ID, and make a new class and make that as a subclass of UINavigaionController.

After the steps above, we will now have to modify our AppDelegate. Finally, check out the code below.

Basically, we have just init our root navigation controller and assigned a root view controller to it, which is our main screen. Then assign that navigation controller to the SideNavigationController and modify the side menu a bit to prevent a bug and make it swipe-able.


***currently running the sample app in a simulator, to provide a screenshot, even though I'm running out of time, I got plenty of tasks and appointment to do and attend... Wooo!***

So that's pretty much all the steps you need to implement a navigation controller to the CosmicMind/Material's Side Menu. If you got any questions or clarifications, post your comment below.

CHEERS!