<div class="side-nav-wrapper">
    <div class="profile-element" ng-if="!$ctrl.minus">
        <div>
            <img alt="image" class="img-circle" ng-src="{{ $ctrl.logo }}" />
        </div>
        <div>
            <div class="clear font-bold">
                <div>
                    {{$ctrl.helloText + $ctrl.hidenUserName($ctrl.userInfo.shopName?$ctrl.userInfo.shopName:$ctrl.userInfo.username)}}
                    <br>{{ $ctrl.welcomes ? $ctrl.welcomes : '欢迎使用灵犀!'}}
                </div>
            </div>
        </div>
    </div>
    <div class="menu-item" ng-class="{ 'active': menu.active, 'inActive': !menu.active }"
        ng-repeat="menu in $ctrl.menus track by $index" ng-click="$ctrl.toggleMenuOrNavigate(menu, $event)">
        <i class="menu-icon" ng-class="menu.iconName"></i>
        <span ng-if="!$ctrl.minus">{{ menu.displayName }}</span>
        <i ng-class="{ 'fa fa-angle-left': !menu.expanded, 'fa fa-angle-down': menu.expanded }"
            ng-if="menu.children && menu.children.length > 0 && !$ctrl.minus"></i>

        <div class="second-level-menu-item animate-if"
            ng-class="{ 'active': secondLevelMenu.active, 'inActive': !secondLevelMenu.active }" ng-if="menu.expanded"
            ng-repeat="secondLevelMenu in menu.children track by $index"
            ng-click="$ctrl.toggleMenuOrNavigate(secondLevelMenu, $event)">
            <i class="menu-icon" ng-class="secondLevelMenu.iconName"></i>
            <span ng-if="!$ctrl.minus">{{ secondLevelMenu.displayName }}</span>
            <i ng-class="{ 'fa fa-angle-left': !secondLevelMenu.expanded, 'fa fa-angle-down': secondLevelMenu.expanded }"
                ng-if="secondLevelMenu.children && secondLevelMenu.children.length > 0 && !$ctrl.minus"></i>

            <div class="third-level-menu-item animate-if"
                ng-class="{ 'active': thirdLevelMenu.active, 'inActive': !thirdLevelMenu.active }"
                ng-if="secondLevelMenu.expanded" ng-repeat="thirdLevelMenu in secondLevelMenu.children track by $index"
                ng-click="$ctrl.toggleMenuOrNavigate(thirdLevelMenu, $event)">
                <i class="menu-icon" ng-class="thirdLevelMenu.iconName"></i>
                <span ng-if="!$ctrl.minus" class="special-box">
                    {{ thirdLevelMenu.displayName }}
                    <span class="special-span" ng-if="thirdLevelMenu.id === 'c72i'">千人千面</span>
                </span>
                <i ng-class="{ 'fa fa-angle-left': !thirdLevelMenu.expanded, 'fa fa-angle-down': thirdLevelMenu.expanded }"
                    ng-if="thirdLevelMenu.children && thirdLevelMenu.children.length > 0 && !$ctrl.minus"></i>
            </div>
        </div>
    </div>
</div>