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">
            <div ng-show="isInState('home') || isInState('rooms')">
                <form ng-submit="goToFirstMatch()">
                    <md-autocomplete
                            md-selected-item="Search.selected"
                            md-search-text="Search.value"
                            md-no-cache="true"
                            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 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"
                                   ng-click="DataShareBusiness.upCurrentGroup()">
                            ..
                        </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="{{getStateName()}}({group: DataShareBusiness.getSearchString(group)})">
                            {{ group.Name }}
                        </md-button>
                    </li>
                </ul>
            </div>

            <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 ng-hide="isInState('home')">
                <span>Want your courses?</span>
                <md-button class="md-primary md-group-button col-xs-12" ui-sref="home">
                    Go to your courses
                </md-button>
            </div>

            <div ng-hide="isInState('rooms')">
                <span>Are there people here?</span>
                <md-button class="md-primary md-group-button col-xs-12" ui-sref="rooms">
                    Show all rooms
                </md-button>
            </div>
        </div>
    </md-content>
</md-sidenav>