acha-framework/src/frontend/panel/scripts/directives/action-bar/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<ul class="af-action-bar header-actions">
    <li class="actions-stretch-menu" id="action-stretch-menu">
        <div class="icon"></div>
    </li>
    <li ng-click="vm.collapseMenu()" id="action-menu-collapse">
        <a>
            <i class="pe-7s-menu"></i>
        </a>
    </li>
    <li ng-if="vm.dataSource.showNotifications"
        class="actions-notification">
        <a class="dropdown-toggle"
           data-toggle="dropdown"
           title="{{:: 'panel.general.notifications' | translate}}"
           href="javascript:void(0)">
            <i class="pe-7s-mail"></i>
        </a>
        <ul ng-if="vm.dataSource.notifications.length"
            class="dropdown-menu dropdown-arrow pull-right">
            <li>
                <div class="notification-header">
                    <div class="header-title">
                        {{:: 'panel.general.notifications' | translate}}
                    </div>
                </div>
                <div ng-repeat="notification in vm.currentSet"
                     class="{{vm.getNotificationClass(notification, $index)}}">
                    <div ng-if="$index === 0" class="widget {{notification.cssClass}}">
                        <div class="row">
                            <div class="col-lg-6 h-70 w-70 p-5 align-center">
                                <div>
                                    <img ng-src="{{notification.image}}"
                                         class="w-60 h-60"
                                         alt="{{notification.author}}">
                                </div>
                            </div>
                            <div class="col-lg-6 h-70 w-m-70 p-5 p-t-10">
                                <div class="">
                                    <strong class="f-13">
                                        {{notification.author}}
                                    </strong>
                                </div>
                                <div class="f-11">
                                    {{notification.subject}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="notification-message">
                        <div class="message-title">
                            {{notification.title}}
                        </div>
                        <div class="message-time">
                            <i class="pe-7s-clock v-a-middle"></i>
                            {{notification.date | moment}}
                        </div>
                    </div>
                </div>
                <div class="notification-footer">
                    <a class="pull-left" ng-click="vm.prev($event)" href="javascript:void(0)">
                        <i class="pe-7s-angle-left-circle f-25"></i>
                    </a>
                    <a class="pull-right" ng-click="vm.next($event)" href="javascript:void(0)">
                        <i class="pe-7s-angle-right-circle f-25"></i>
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li ng-repeat="button in vm.dataSource.buttons">
        <a ng-if="::button.href" href="{{::button.href}}">
            <i class="{{::button.icon}}"></i>
        </a>
        <a ng-if="::!button.href"
           ng-click="vm.onAction(button)"
           href="javascript:void(0)">
            <i class="{{::button.icon}}"></i>
        </a>
    </li>
    <li >
        <a ng-click="vm.logout()"
           href="javascript:void(0)">
            <i class="pe-7s-power"></i>
        </a>
    </li>
</ul>