Ionic-side-menu hides all of my main content

Hello,

I'm trying to implement a side-bar on my app so I am able to store menu related options inside it, but my issue is that whenever I integrate the ion-side-bar-menu, it always hides my main content.

For example, Whenever I don't add the side bar directives in my code, everything works as fine, even when I'm using the ionic-header-bar directives. But whenever I wrap my header bar inside the side-menu, everything outside of it disappears. Its as if the side-menu pushes or overlaps all other existing content unless I remove it from the DOM.

Refer to the screenshots below. I should be seeing the content to the right of the side-menu:

Thank you!

content-hide.png307x541 8.38 KB

Content-show.png319x526 7.09 KB

    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
        </ion-nav-buttons>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
                <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
                <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
                <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
<ion-content class="has-header">
    <ion-list>
        <p>Test</p>
    </ion-list>
</ion-content>