One of the most common implementations of menu views has been the "Side Drawer", "basement", or "Side Menu" made popular in apps such as Facebook and Path. When someone taps the infamous “Hamburger” to open a side menu the main screen slides to the right (or left in some implementations) to reveal another screen below. This works well in iOS 6 and earlier because the status bar exists in a 20pt tall area that is isolated from the rest of the application. In iOS 7, the status bar is overlaid on the screen below it. What does it mean for sidebars or "basement" views in iOS 7?

Soon after iOS 7 was announced at WWDC in June, many designers on Dribbble started playing around with a new approach for doing these menus. Many came to a similar approach where the main screen would scale down and to the right.

Working with the team at Luvocracy, we were inspired by this approach and with a few ideas of our own we created TWTSideMenuViewController.

TWTSideMenuViewController is a container view controller built to manage a menu view and a main view in a beautiful way.

With iOS 7, apps are encouraged to use the whole screen and not rely on the 20pt status bar to be outside of the main screen of your app. This breaks the existing side bar idea in that the status bar with a single style is overlaid on two views, the menu view and the main view.

With TWTSideMenuViewController we solve this by moving and scaling the main view down and away from the status bar. Inspired by iOS 7, we also improved the idea of this scaled down view approach to think of the menu and the main view as a single view with the menu and main view in the same visual plane. We merely change the viewport to focus on different aspects of the application. This can be seen in iOS 7 when you launch an app and zoom into it or when you use the new app switcher.

We think it is a clean approach that looks beautiful in iOS 7. Below is a video of it in action in the Luvocracy iOS app.