I intend to create the following design:

![enter image description here](https://i.stack.imgur.com/CxADj.png)

* The main view should show a webpage
* It should have a drawer on the left side
* The drawer should be triggered by a 'hamburger' icon in the app header

I have the following app structure now:

Main view:

```
<div class="padding" ng-controller="IndexController">
    <super-navbar>
        <super-navbar-title>
            My first app!
        </super-navbar-title>
    </super-navbar>    
</div>

```

Controller:

```
angular
  .module('example')
  .controller('IndexController', function($scope, $document, supersonic) {
      $scope.navbarTitle = "Index";         
      addEventListener('load', load, false);
      steroids.view.displayLoading();
      var googleLayer = null;
      googleLayer = new steroids.views.WebView({ location: "http://example.com/page1" });;
      googleLayer.preload({}, {
          onSuccess: replaceLayer
      });

      function load() {        

          var options = {
              side: "left",
              width: 150
          }
          supersonic.ui.views.find("leftDrawer").then(function (leftDrawer) {
              supersonic.ui.drawers.init(leftDrawer);
              supersonic.ui.drawers.open("leftDrawer")
          });

      }
      function replaceLayer() {          
          steroids.layers.replace({
              view: googleLayer,
          }, {
              onSuccess: function () {
                  //alert("The layer stack has been replaced.");
              },
              onFailure: function (error) {
                  //alert("Could not replace the layer stack: " + error.errorDescription);
              }
          });
      }      
  });

```

Structure.coffee:

```
# Read more about app structure at http://docs.appgyver.com

module.exports =

  # See styling options for tabs and other native components in app/common/native-styles/ios.css or app/common/native-styles/android.css
#tabs
    rootView:
     location: "example#getting-started"

  preloads: [
    {
      id: "learn-more"
      location: "example#learn-more"
    }
    {
      id: "using-the-scanner"
      location: "example#using-the-scanner"
    }
  ]

  drawers:
    left:
      id: "leftDrawer"
      location: "example#drawer"
      showOnAppLoad: true
     options:
      animation: "swingingDoor"

 # initialView:
  #   id: "initialView"
   #  location: "example#initial-view"

```

The behavior so far:

* The application starts and displays a loading circle (because of `steroids.view.displayLoading();`)
* The loading circle disappears and the webpage loads (as the googleLayer is replacing the initial view)
* No drawer is shown

I think, these modifications should be made:

* The initial view should already load the page (how? it is just a div)
* The drawer should be working
* There should be a clickable 'hamburger' icon

What should I modify to achieve the desired behavior? I can't find any proper tutorial or sufficient documentation.