<div class="reportingMenu"><ul class="navbar hide-on-med-and-down" role="menu" aria-label="{{ 'CoreHome_MainNavigation'|translate }}">
    <li ng-repeat="category in menuModel.menu"
        class="menuTab"
        role="menuitem"
        ng-class="{'active': category.active}">
        <a class="item" tabindex="5"
           href=""
           ng-click="loadCategory(category)">
            <span class="menu-icon {{ category.icon ? category.icon : 'icon-arrow-right' }}"></span>{{ category.name }}
            <span class="hidden">
             {{ 'CoreHome_Menu'|translate }}
           </span>
        </a>

        <ul role="menu">
            <li ng-repeat="subcategory in category.subcategories"
                role="menuitem"
                ng-class="{'active': subcategory.active}">
                <div ng-if="subcategory.isGroup" piwik-menudropdown show-search="true" menu-title="{{ subcategory.name|escape }}">
                    <a class="item" tabindex="5"
                       ng-repeat="subcat in subcategory.subcategories"
                       title="{{ subcat.tooltip }}"
                       ng-class="{'active': subcat.active}"
                       ng-href="#?{{ makeUrl(category,subcat) }}"
                       ng-click='loadSubcategory(category, subcat)'>
                        {{ subcat.name }}
                    </a>
                </div>

                <a ng-if="!subcategory.isGroup"
                   ng-href="#?{{ makeUrl(category,subcategory) }}"
                   class="item"
                   ng-click='loadSubcategory(category, subcategory)'>
                    {{ subcategory.name }}
                </a>

                <a class="item-help-icon"
                   tabindex="5" href="javascript:"
                   ng-if="subcategory.help"
                   ng-click="showHelp(category, subcategory, $event)"
                   ng-class="{'active': helpShownCategory == subcategory && subcategory.help}"
                >
                    <span class="icon-help"></span>
                </a>
            </li>
        </ul>
    </li>
</ul>
<ul id="mobile-left-menu" class="sidenav hide-on-large-only">
    <li class="no-padding" ng-repeat="category in menuModel.menu">
        <ul class="collapsible collapsible-accordion" piwik-side-nav="nav .activateLeftMenu">
            <li>
                <a class="collapsible-header"><i class="{{ category.icon ? category.icon : 'icon-arrow-bottom' }}"></i>{{ category.name }}</a>
                <div class="collapsible-body">
                    <ul>
                        <li ng-repeat="subcategory in category.subcategories">
                            <a ng-if="subcategory.isGroup"
                               ng-repeat="subcat in subcategory.subcategories"
                               ng-click='loadSubcategory(category, subcat)'
                               ng-href="#?{{ makeUrl(category,subcat) }}">{{ subcat.name }}</a>
                            <a ng-if="!subcategory.isGroup"
                               ng-click='loadSubcategory(category, subcategory)'
                               ng-href="#?{{ makeUrl(category,subcategory) }}">{{ subcategory.name }}</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

</div>