AngularJS UI-Router with sidebar nav on some pages

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <title>UI Router Nav Demo</title>
    <!-- Styles -->
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link data-require="fontawesome@*" data-semver="4.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <!-- Scripts -->
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <!-- App Scripts -->
    
    <script src="app.js"></script>
    
  </head>

  <body>
    <!-- Top Nav -->
    <nav class="navbar navbar-inverse">
      <div class="navbar-brand" ui-sref="home">ui-router sidebar demo</div>
      <ul class="nav navbar-nav">
        <li>
          <a ui-sref="home">Home</a>
        </li>
        <li>
          <a ui-sref="products.intro">Products</a>
        </li>
      </ul>
    </nav>
    <!-- Content -->
    <div >
      <div ui-view></div>
    </div>
    
  </body> 
</html>

var app = angular.module('app', ['ui.router']);

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
  
  $urlRouterProvider.otherwise('/');
  
  $stateProvider
    .state('home', {
      url:'/',
      templateUrl: 'home.html'
    })
    .state('home.list', {
      url:'/list',
      templateUrl: 'home.list.html',
      controller: function($scope) {
        $scope.items = ['Item 1','Item 2','Item 3','Item 4']
      }
    })
    .state('home.paragraph', {
      url:'/paragraph',
      templateUrl: 'home.paragraph.html'
    })
    .state('products', {
      url:'/products',
      templateUrl: 'products.html'
    })
    .state('products.intro', {
      url:'/products/intro',
      templateUrl: 'products.intro.html'
    })
    .state('products.list', {
      url:'/products/list',
      templateUrl: 'products.list.html'
    })
    .state('products.another', {
      url:'/products/another',
      templateUrl: 'products.another.html'
    });
}]);

<div id="page-content">
  <h2>Page without Sidebar</h2>
  <div class="alert alert-info" style="text-align:center;"><h5>This demo is best viewed in full-screen mode</h5></div>
  <div class="jumbotron">
    <div class="lead">A bit about this demo</div>
    <small>This demo aims to show how to use angularjs ui-router in combination
  with a ui requirement wherein some pages need a sidebar navigation
  and others don't. You'll note that this page has
  no side navbar and uses nested content, whereas the Products 
  page includes a collapsible sidebar navigation with nested 
  content areas for each sub-nav items.</small>
  </div>

  <a ui-sref=".list" class="btn btn-primary">Show Nested List</a>
  <a ui-sref=".paragraph" class="btn btn-primary">Show Nested Paragraph</a>
  <hr>
  <div ui-view>
    Click a button above to access nested content. This paragraph is default content in the nested area, which is replaced by the selected child contact when a button is clicked.
  </div>
</div>

<div id="page-wrapper">
  <div id="page-viewport">
    <div id="sidebar">
      <div id="sidebar-header">
        <a href="" class="toggle-sidebar"><h3>Sidebar</h3></a>
        <span class="pull-right">
          <a href="" class="toggle-sidebar btn btn-default">
            <i class="fa fa-bars"></i>
          </a>
        </span> 
      </div>
      <ul class="nav nav-pills nav-stacked">
        <li><a ui-sref="products.intro">Intro<span class="pull-right"><i class="fa fa-info"></i></span></a>
        </li>
        <li><a ui-sref="products.list">Product List<span class="pull-right"><i class="fa fa-list"></i></span></a>
        </li>
        <li><a ui-sref="products.another">Another Content Page<span class="pull-right"><i class="fa fa-code"></i></span></a>
        </li>

      </ul>
    </div>
    <div id="sidebar-page-content">
      <div ui-view></div>
    </div>
  </div>
</div>
<script src="sidebar.js"></script>

<ul>
  <li ng-repeat="item in items">
    {{item}}
  </li>
</ul>

<p>I am a nested paragraph</p>


        <h3>Zpydee's Shop</h3>
        <table class="table table-striped">
          <tr>
            <td><strong>Product</strong></td>
            <td><strong>Price</strong></td>
          </tr>
          <tr>
            <td>Unicorn</td>
            <td>$10 million</td>
          </tr>
          <tr>
            <td>Bugatti Veyron</td>
            <td>$1.4 million</td>
          </tr>
          <tr>
            <td>Merlin's Wand</td>
            <td>$30 million</td>
          </tr>
          <tr>
            <td>Russian Bride</td>
            <td>$0.25</td>
          </tr>
        </table>

$(function() {
    $('.toggle-sidebar').click(function() {
        toggleSideBar();
    });
});

function toggleSideBar() {
    
    if ($('#page-wrapper').hasClass('show-sidebar')) {
        // Do things on Nav Close
        $('#page-wrapper').removeClass('show-sidebar');
    } else {
        // Do things on Nav Open
        $('#page-wrapper').addClass('show-sidebar');
    }
    //$('#site-wrapper').toggleClass('show-nav');
}

.navbar {
  margin-bottom:0px;
}
#page-wrapper {
  position: fixed;
  width:100%;
  height:100%;
  top:52px;
  left:0;
}

#page-viewport {
  position:relative;
  width:100%;
  height:100%;
  transition: .5s ease all;
}

#sidebar {
  position: absolute;
  width: 250px;
  height: 100%;
  left:-200px;
  border-right: 1px solid #f0f0f0;
  background-color:#f9f9f9;
  padding: 5px;
}

#sidebar h3 {
  display:inline;
  position:relative;
  top:5px;
  left:5px;
}
#sidebar a:hover {
  text-decoration:none;
}

#sidebar-header {
  height: 40px;
  border-bottom:1px solid #f0f0f0;
}

#sidebar-page-content {
  position:absolute;
  width: -webkit-calc(100% - 50px);
  left:50px;
  padding: 5px;
  transition: .5s ease all;
}

#page-content {
  padding: 5px;
}

#page-wrapper.show-sidebar #page-viewport {
  -webkit-transform: translateX(200px);
}

#page-wrapper.show-sidebar #sidebar-page-content {
  width: -webkit-calc(100% - 250px);
}

<h2>Another Page</h2>
<p>Simply another page...</p>

<h2>Page with Sidebar</h2>
<div class="jumbotron">
<div class="lead">Nesting views with a sidebar</div>
<small>This page includes a collapsible sidebar navigation
feature. You can click on the menu bars to open and close
  the sidebar, and can also navigate to nested content pages
  with the sidebar open or closed.
</small>
</div>