JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="app" ng-controller="ctrl">
<section class="container">
<aside>
<a ng-repeat="n in nav" ui-sref="{{ n.state }}">state: {{ n.state }}</a>
</aside>
<div ui-view><span>dynamic content</span></div>
</section>
</div>
CSS
.container {
width: 100%;
height: 250px;
}
.container aside {
width: 120px;
height: 100%;
overflow-y: auto;
padding: 0 10px;
display: inline-block;
background-color: #E6E6E6;
}
.container aside a {
width: 100%;
height: 60px;
display: block;
background-color: #B8B8B8;
margin: 10px 0;
cursor: pointer;
}
.container div {
width: calc(100% - 145px);
background-color: #E6E6E6;
display: inline-block;
height: 100%;
float: right;
}
.container div span {
font-size: 20pt;
}
.container aside a:hover {
background-color: #DDD;
}
JavaScript
angular.module('app', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('a', { template: '<span>a</span>' })
.state('b', { template: '<span>b</span>' })
.state('c', { template: '<span>c</span>' })
.state('d', { template: '<span>d</span>' })
.state('e', { template: '<span>e</span>' })
.state('f', { template: '<span>f</span>' })
.state('g', { template: '<span>g</span>' })
.state('h', { template: '<span>h</span>' })
.state('i', { template: '<span>i</span>' })
.state('j', { template: '<span>j</span>' })
.state('k', { template: '<span>k</span>' })
.state('l', { template: '<span>k</span>' });
}])
.controller('ctrl', ['$scope', function($scope) {
$scope.nav = [
{'state': 'a' }, {'state': 'b' }, {'state': 'c' },
{'state': 'd' }, {'state': 'e' }, {'state': 'f' },
{'state': 'g' }, {'state': 'h' }, {'state': 'i' },
{'state': 'j' }, {'state': 'k' }, {'state': 'l' }
];
}]);