title: How to create a customized webview in Appgyver Steroids
body: <p>I intend to create the following design:</p>
  
  <p><img src="https://i.stack.imgur.com/CxADj.png" alt="enter image description here"></p>
  
  <ul>
  <li>The main view should show a webpage</li>
  <li>It should have a drawer on the left side</li>
  <li>The drawer should be triggered by a 'hamburger' icon in the app header</li>
  </ul>
  
  <p>I have the following app structure now:</p>
  
  <p>Main view:</p>
  
  <pre><code>&lt;div class="padding" ng-controller="IndexController"&gt;
      &lt;super-navbar&gt;
          &lt;super-navbar-title&gt;
              My first app!
          &lt;/super-navbar-title&gt;
      &lt;/super-navbar&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>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);
                }
            });
        }      
    });
  </code></pre>
  
  <p>Structure.coffee:</p>
  
  <pre><code># 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"
  </code></pre>
  
  <p>The behavior so far:</p>
  
  <ul>
  <li>The application starts and displays a loading circle (because of  <code>steroids.view.displayLoading();</code>)</li>
  <li>The loading circle disappears and the webpage loads (as the googleLayer is replacing the initial view)</li>
  <li>No drawer is shown </li>
  </ul>
  
  <p>I think, these modifications should be made:</p>
  
  <ul>
  <li>The initial view should already load the page (how? it is just a div)</li>
  <li>The drawer should be working</li>
  <li>There should be a clickable 'hamburger' icon</li>
  </ul>
  
  <p>What should I modify to achieve the desired behavior? I can't find any proper tutorial or sufficient documentation.</p>