SideMenu AngularJS + Bootstrap

Basic example of Side Menu with angularjs+bootstrap.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="sideBar" ng-controller="MainCtrl">
    
<nav class="navbar navbar-default NOnavbar-fixed-top" style="border-color:black; background-color: black;margin-left: -2px;height: 70px;" >
  <div class="container-fluid">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed menu-toggle" id="menu-toggle" href="#menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="NOnavbar-brand" href="#/home">
        <p class="logo">Sistema</p>
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <span class="glyphicon glyphicon-share hidden-xs pull-right share-link" aria-hidden="true" ng-click="sair()"></span>
    </div>
  </div>
</nav>

<div id="wrapper">
  <div id="sidebar-wrapper" >
    <ul class="sidebar-nav">
      <div class="user-panel">
        <div class="pull-left image">
          <img ng-src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/256/blue-user-icon.png" class="img-arredondadaSide" alt="User Image"></img>
        </div>
        <div class="pull-left info">
        </br>
        <p style="color: rgb(105, 183, 105)">Bem Vindo, Diego</p>
        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div>
    <hr class="colorgraph">
    <li>
      <a href="#/home">
       ...

CSS

.img-arredondadaSide {
  border-radius: 100%;
  overflow: hidden;
  height: 100px;
  width:100px;
  background: black;
  margin-top:10px;
  margin-left: 5px;

}

.img-arredondadaChat {
  border-radius: 100%;
  overflow: hidden;
  height: 50px;
  width:50px;
  background: black;

}
.tema{
  color:red;
}

.chat-container {
    width: 400px;
    height: 100%;
    margin: 0 auto;
}

.corStatusFinalizado{
  color:green;
}
.corNormal{
  color:#3366FF;
}

.corStatusNaoFinalizado{
  color:red;
}

.alinharCentro{
  text-align: center;
}
.user-panel {
  padding: 10px;
}
.user-panel:before,
.user-panel:after {
  display: table;
  content: " ";
}
.user-panel:after {
  clear: both;
}
.user-panel > .image > img {
  width: 45px;
  height: 45px;
}
.user-panel > .info {
  font-weight: 600;
  padding: 5px 5px 5px 15px;
  font-size: 14px;
  line-height: 1;
}
.user-panel > .info > p {
  margin-bottom: 9px;
}
.user-panel > .info > a {
  text-decoration: none;
  padding-right: 5px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: normal;
}
.user-panel > .info > a > .fa,
.user-panel > .info > a > .ion,
.user-panel > .info > a > .glyphicon {
  margin-right: 3px;
}

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin-top: -20px;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width:...

JavaScript

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

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/BemVindo')
    $stateProvider

        .state('home', {
            url: "/BemVindo",
            views: {
                "main": {
                    controller: 'homeCtrl',
                    template: "<p>HOME</p>"
                }
            }
        })
        .state('cadastroCliente', {
            url: "/cadastroCliente",
            views: {
                "main": {
                    controller: 'cadastroClienteCtrl',
                    template: "<p>Cadastro Cliente</p>"
                }
            }
        })
        .state('chat', {
            url: "/chat",
            views: {
                "main": {
                    controller: 'chatCtrl',
                    template: "<p><b>chat</b></p>"
                }
            }
        })
});

app.controller('MainCtrl', function($scope) {

});

app.controller('homeCtrl', function($scope) {

});

app.controller('cadastroClienteCtrl', function($scope) {

});
app.controller('chatCtrl', function($scope) {

});