ng-show is Hiding All Content On Page

Question

Here is my scenario:

I'm creating a sidebar menu with AngularJS. When the user selects the hamburger icon, it should slide the menu to the right. When the user selects the remove button, the menu should slide to the left (off the screen).

Current Scenario:

The menu opens and closes as expected. However, the rest of the content on the page disappears when the menu opens. I've spent time looking on the web, but cannot isolate the issue. Any tips or suggestions?

Here is my repository:

https://bitbucket.org/ChaseHardin/teaplanner/

Code:

Controller

"use strict";

teaApp.controller("menuController", function($scope) {
    $scope.toggled = false;

    $scope.toggle = function() {
        $scope.toggled = !$scope.toggled;
    }
});

View

 <div ng-controller="menuController">
        <h3 class="glyphicon glyphicon-menu-hamburger" id="menu-align-hamburger" ng-click="toggle()" ng-show="!toggled"></h3>
        <div class="menu-box" ng-show="toggled">
            <h3 class="glyphicon glyphicon-remove" id="menu-align-remove" ng-click="toggle()"></h3>
        </div>
        <div>
            <h1 class="text-center">Hello StackOverflow!!</h1>
        </div>
    </div>

CSS

.menu-box {
    background-color: #403b41;
    width: 20%;
    height: 100vh;
}

#menu-align-hamburger {
    padding-left: 15px;
    cursor: pointer
}

#menu-align-remove {
    padding-left: 15px;
    cursor: pointer;
    color: dimgrey;
}

Answer 1

When your menu expands, it ends up taking up the entire content area, pushing your "Hello" text below the sidebar.

Create a more flexible layout, such as applying display:inline-block to both the menu and the content area will cause the content to simply "move over" when the menu opens rather than getting pushed below the menu.

PS, if you scroll down far enough, you'll see that your content is still there. it's just hidden from view, depending on your resolution.