AngularJS or at least no-jQuery version

[moravcik]

would be very helpful

[cxr29]

I wrote one:

(function(angular) {
    angular.module('bootstrap.sidebar', [])
        .directive('sidebar', ['$animate', '$document', function($animate, $document) {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    if (!element.hasClass('sidebar')) element.addClass('sidebar');
                    if (!element.hasClass('sidebar-left') &&
                        !element.hasClass('sidebar-right')) element.addClass('sidebar-left');
                    if (!scope.$eval(attrs.sidebar) &&
                        element.hasClass('sidebar-open')) element.removeClass('sidebar-open');

                    function show() {
                        if (element.hasClass('sidebar-open')) return;
                        $animate.addClass(element, 'sidebar-open');
                    }

                    function hide() {
                        if (!element.hasClass('sidebar-open')) return;
                        $animate.removeClass(element, 'sidebar-open');
                    }

                    scope.$watch(attrs.sidebar, function(newValue) {
                        newValue ? show() : hide();
                    });

                    if (attrs.clickOutside) {
                        function handler(event) {
                            if (!event || !event.target) return;
                            for (var e = event.target; e != null; e = e.parentNode) {
                                var element = angular.element(e);
                                if (element.hasClass('sidebar') ||
                                    element.hasClass('toggle-sidebar')) return;
                            }
                            scope.$apply(attrs.clickOutside);
                        }

                        $document.on('click', handler);

                        scope.$on('$destroy', function() {
                            $document.off('click', handler);
                        });
                    }
                }
            };
        }]);
})(angular);

<button type="button" class="navbar-toggle toggle-sidebar toggle-left hidden-md hidden-lg" ng-click="hideLeftSidebar = !hideLeftSidebar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle toggle-sidebar toggle-right" ng-click="showRightSidebar = !showRightSidebar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div sidebar="!hideLeftSidebar" class="col-xs-7 col-sm-3 col-md-3 sidebar-left sidebar-animate sidebar-md-show">
    <ul class="nav navbar-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>
<div sidebar="showRightSidebar" click-outside="showRightSidebar = false" class="col-xs-7 col-sm-3 col-md-3 sidebar-right sidebar-animate">
    <ul class="nav navbar-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>