chronos-front/app/views/sidebar.html

<md-sidenav class="md-sidenav-left md-whiteframe-z2 md-sidebar" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
    <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools"><a ui-sref="home">Chronos</a></h1>
    </md-toolbar>
    <md-content layout-padding ng-controller="SideBarController">
        <div lu-busy="sidebar">
            <form ng-submit="goToFirstMatch()">
                <md-autocomplete
                        md-selected-item="Search.selected"
                        md-search-text="Search.value"
                        md-selected-item-change="goTo(item)"
                        md-items="item in search(ctrl.searchText)"
                        md-item-text="item.Name"
                        md-min-length="1"
                        placeholder="Type a group name...">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Name}}</span>
                    </md-item-template>
                    <md-not-found>
                        No groups matching "{{Search.value}}" were found.
                    </md-not-found>
                </md-autocomplete>
            </form>

            <ul class="col-sm-12 sidebar-group-list">
                <li ng-show="DataShareBusiness.CurrentGroups.length != 0" class="col-xs-12">
                    <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
                               ui-sref="home({group: DataShareBusiness.getSearchString(DataShareBusiness.getCurrentGroup().Parent)})">
                        ..
                    </md-button>
                </li>
                <li ng-repeat="group in getCurrentGroups()" class="col-xs-12">
                    <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
                               ng-class="{'md-group-button-checked': DataShareBusiness.getCurrentGroup().Id == group.Id}"
                               ui-sref="home({group: DataShareBusiness.getSearchString(group)})">
                        {{ group.Name }}
                    </md-button>
                </li>
            </ul>

            <div ng-hide="isInState('freeroom')">
                <span>Need a room ?</span>
                <md-button class="md-primary md-group-button col-xs-12" ui-sref="freeroom">
                    Find a free room!
                </md-button>
            </div>
        </div>
    </md-content>
</md-sidenav>