<div class="menu-panel" ng-controller="MenuController">
    <!-- Logo placeholder !-->
    <a class="menu-logo" href="" ng-click="$hide(); goTo('/live');">
        <img src="/assets/images/logo_horizontal.png" />
    </a>
    <!-- News !-->
    <a class="menu-panel-nav-link" ng-class="{'menu-active': currentUrl('/editorial')}" data-match-route="/news" href="" ng-click="$hide(); goTo('/editorial', true);">
        <img src="/assets/images/menu/ic_news_inverse.png"/>
        <span class="menu-panel-nav-link-text">{{'NEWS' | translate}}</span>
    </a>
    <!-- Matches !-->
    <a class="menu-panel-nav-link" ng-class="{'menu-active': currentUrl('/live')}" data-match-route="/live" href="" ng-click="$hide(); goTo('/live');">
        <img src="/assets/images/menu/ic_matches_inverse.png"/>
        <span class="menu-panel-nav-link-text">{{'MATCHES' | translate}}</span>
    </a>
    <!-- Separator !-->
    <div class="menu-title">{{'TOP_COMPETITIONS' | translate}}</div>
    <!-- Popular competitions !-->
    <div ng-repeat="competition in ::topCompetitions">
        <a class="menu-panel-nav-link" ng-class="{'menu-active': currentUrl('/competition/' + competition.competitionId +'/' + competition.seasonId)}" href="" ng-click="$hide(); goTo('/competition/' + competition.competitionId +'/' + competition.seasonId)">
            <img ng-src="{{CONFIG.resources.default_competition_logo}}" of-img-src="competitionFlag(competition.competitionId)"/>
            <span class="menu-panel-nav-link-text">{{::competition.competitionName}}</span>
        </a>
    </div>
    <!-- Separator !-->
    <div class="menu-title">{{'BROWSE' | translate}}</div>
    <!-- Browse competitions !-->
    <a class="menu-panel-nav-link" ng-class="{'menu-active': currentUrl('/browse/' + CONFIG.browse.competitions)}" data-match-route="#!/about" href="" ng-click="$hide(); goTo('/browse/' + CONFIG.browse.competitions);">
        <img ng-src="/assets/images/menu/ic_browse_competitions_inverse.png" />
        <span class="menu-panel-nav-link-text">{{'COMPETITIONS' | translate}}</span>
    </a>
    <!-- Browse teams !-->
    <a class="menu-panel-nav-link" ng-class="{'menu-active': currentUrl('/browse/' + CONFIG.browse.teams)}" data-match-route="" href="" ng-click="$hide(); goTo('/browse/' + CONFIG.browse.teams);">
        <img ng-src="/assets/images/menu/ic_browse_teams_inverse.png" />
        <span class="menu-panel-nav-link-text">{{'TEAMS' | translate}}</span>
    </a>
    <!-- About !-->
    <a id ="menu-about" class="menu-panel-nav-link margin-2-b" ng-class="{'menu-active': currentUrl('/about')}" data-match-route="#!/about" href="" ng-click="$hide(); goTo('/about')">
        <img ng-src="/assets/images/menu/ic_info_inverse.png"/>
        <span class="menu-panel-nav-link-text">{{'ABOUT' | translate}}</span>
    </a>
</div>
