Ionic-side-menu hides all of my main content


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!

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