title: Adding side menu to existing ionic app
body: <p>I have this Ionic App which already has a lot of pages.
  Now, requirements says that I need to add a page theat will "slide in" like this one:</p>
  
  <pre><code>http://ionicframework.com/docs/api/directive/ionSideMenus/
  </code></pre>
  
  <p>The app already has a footer like this:</p>
  
  <pre><code>&lt;ion-footer-bar align-title="left" class="bar-assertive"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col text-center"&gt;
          &lt;i class = "icon ion-navicon-round" ng-click="go_to('settings')"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="col text-center"&gt;
          &lt;i class = "icon ion-person-stalker" ng-click="go_to('social')"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="col text-center"&gt;
          &lt;i class = "icon ion-map" ng-click="go_to('home')"&gt;&lt;/i&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see each element in the footer, on click, opens a new page.
  But the most left icon has to open the page in a "slide" way.
  So I guess I have to use ion-side-menus. Is that correct?</p>
  
  <p>In that case I don't really understand how to implement this.
  I created a new route like this:</p>
  
  <pre><code>.state('test', {
  url: "/test",
  controller: 'TestCtrl',
  abstract: true,
  templateUrl: "views/test.html"
  })
  </code></pre>
  
  <p>Then inside test.html I put:</p>
  
  <pre><code>&lt;ion-view&gt;
  &lt;ion-side-menus&gt;
      &lt;!-- Left menu --&gt;
      &lt;ion-side-menu side="left"&gt;
          ion-side-menu
      &lt;/ion-side-menu&gt;
  
      &lt;ion-side-menu-content&gt;
          &lt;ion-nav-bar class="bar-stable nav-title-slide-ios7"&gt;
              &lt;ion-nav-back-button class="button-clear"&gt;&lt;i class="icon ion-ios7-arrow-back"&gt;&lt;/i&gt; Back&lt;/ion-nav-back-button&gt;
          &lt;/ion-nav-bar&gt;
          &lt;ion-nav-view name="menuContent" animation="slide-left-right"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-side-menu-content&gt;
  
      &lt;!-- Right menu --&gt;
      &lt;ion-side-menu side="right"&gt;
          right
      &lt;/ion-side-menu&gt;
  
  &lt;/ion-side-menus&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Is all this correct? And how to trig the menu page? The one called test?
  I tryed to change one of the footer elements and add this:</p>
  
  <pre><code>&lt;ion-nav-buttons side="left"&gt;
  &lt;button menu-toggle="left" class="button button-icon icon ion-navicon"&gt;&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>But nothing happens when I click the button. Only an error message saying that:</p>
  
  <pre><code>Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!  
  </code></pre>