<div class="naviSide"> <ul class="nav bs-sidenav"> <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> <div class="panel panel-default "> <div class="panel-heading " role="tab "> <h4 class="panel-title "> <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoProject();"> Project </a> </h4> </div> </div> </div> <div class="panel-group" role="tablist" aria-multiselectable="true" bs-collapse style="margin-bottom:0px;" ng-model="activeStatus" ng-if="ifshowEnvChild"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a bs-collapse-toggle style=" text-decoration: none;"> <div style="display:inline;" ng-click="gotoEnviron()">Environment </div> <i class="fa fa-sort-asc" aria-hidden="true" style="margin-left: 71px;display:inline" ng-show="activeStatus==0"></i> <i class="fa fa-sort-desc" aria-hidden="true" style="margin-left: 71px;display:inline" ng-show="activeStatus==-1"></i> </a> </h4> </div> <div class="panel-collapse" role="tabpanel" bs-collapse-target> <div class="panel-body" style="border-top: 2px solid grey;text-align: right;cursor:pointer" ng-click="gotoOpenrcPage()" ng-class="{active:$state.includes('app.environmentDetail')}"> Openrc </div> <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoUploadPage()" ng-class="{active:$state.includes('app.uploadImage')}"> Image </div> <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoPodPage()" ng-class="{active:$state.includes('app.podUpload')}"> Pod File </div> <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoContainerPage()" ng-class="{active:$state.includes('app.container')}"> Container </div> <div class="panel-body " style="border:none;text-align: right;"> Others </div> </div> </div> </div> <div class="panel-group" role="tablist" aria-multiselectable="false" bs-collapse style="margin-bottom:0px;" ng-if="!ifshowEnvChild"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a bs-collapse-toggle style=" text-decoration: none;"> <div style="display:inline;" ng-click="gotoEnviron()">Environment </div> <!--<i class="fa fa-sort-asc" aria-hidden="true" style="margin-left: 71px;display:inline"></i>--> </a> </h4> </div> </div> </div> <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> <div class="panel panel-default "> <div class="panel-heading " role="tab "> <h4 class="panel-title "> <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoTestcase()"> Test Case </a> </h4> </div> </div> </div> <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> <div class="panel panel-default "> <div class="panel-heading " role="tab "> <h4 class="panel-title "> <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoSuite()"> Test Suite </a> </h4> </div> </div> </div> </ul> </div> <style> .bs-sidenav { margin-top: 21px; margin-bottom: 20px; width: 124px; } .naviSide { height: 150%; } .nav { margin-bottom: 0; padding-left: 0; list-style: none; } .nav>li { position: relative; display: block; } li { display: list-item; text-align: -webkit-match-parent; } a { cursor: pointer; } a.active { background-color: #EEEEEE; border-radius: 5px; width: 165px; } /* a:hover { width: 165px; }*/ .nav>li>a:hover, .nav>li>a:focus { text-decoration: underline; background-color: transparent; } .active.panel-body { background-color: #dfe3e4; } </style>