<div id="dsb-nav-menu-shade" style="display:none">
</div>

<div id="dsb-vertical-nav">
    <div id="dsb-nav-item-dataservices" class="dsb-nav-item {{vmmain.dataserviceNav}}" ng-click="vmmain.selectPage('dataservice-summary')" body-click="vmmain.selectNavItem(null);">
        <span class="fa fa-fw {{vmmain.page('dataservice-summary').icon}}"></span>
        <div class="dsb-vertical-nav-label" translate="shared.DataServices"></div>
    </div>
    <div id="ds-nav-item-sources" class="dsb-nav-item {{vmmain.datasourceNav}}" ng-click="vmmain.selectPage('datasource-summary')" body-click="vmmain.selectNavItem(null);">
        <span class="fa fa-fw {{vmmain.page('datasource-summary').icon}}"></span>
        <div class="dsb-vertical-nav-label" translate="shared.Sources"></div>
    </div>
    <div id="dsb-nav-item-dashboard" class="dsb-nav-item {{vmmain.connectionNav}}" ng-click="vmmain.selectPage('connection-summary')" body-click="vmmain.selectNavItem(null);">
        <span class="fa fa-fw {{vmmain.page('connection-summary').icon}}"></span>
        <div class="dsb-vertical-nav-label" translate="shared.Connections"></div>
    </div>
    <div id="dsb-nav-item-dashboard" class="dsb-nav-item {{vmmain.homeNav}}" ng-click="vmmain.selectPage('dataservice-home')" body-click="vmmain.selectNavItem(null);">
        <span class="fa fa-fw {{vmmain.page('dataservice-home').icon}}"></span>
        <div class="dsb-vertical-nav-label" translate="shared.Dashboard"></div>
    </div>
    <div class="dsb-nav-item-filler">
    </div>

    <!-- detail menus -->
    <div id="dsb-vertical-nav-details" ng-switch="vmmain.selectedNavItem" ng-show="vmmain.navItemSelected()">
        <div id="dsb-nav-detail-dataservices" class="dsb-nav-detail-item" ng-switch-when="dataservice-summary">
            <h3 translate="shared.DataServices"></h3>
            <p class="description" translate="dataservice-navbar.dataServiceActionsMsg"></p>
            <h4 class="heading" translate="dataservice-navbar.DataServiceActions"></h4>
            <div ng-repeat="page in vmmain.pages(['dataservice-summary', 'dataservice-new'])">
                <div class="action">
                    <a ng-click="vmmain.selectPage(page.id)"><span class="fa fa-fw {{page.icon}}"></span><span>{{page.title}}</span></a>
                </div>
            </div>
        </div>
        <div id="dsb-nav-detail-mappings" class="dsb-nav-detail-item" ng-switch-when="datasource-summary">
            <h3 translate="shared.Sources"></h3>
            <p class="description" translate="dataservice-navbar.sourceActionsMsg"></p>
            <h4 class="heading" translate="dataservice-navbar.SourceActions"></h4>
            <div ng-repeat="page in vmmain.pages(['datasource-summary', 'svcsource-new'])">
                <div class="action">
                    <a ng-click="vmmain.selectPage(page.id)"><span class="fa fa-fw {{page.icon}}"></span><span>{{page.title}}</span></a>
                </div>
            </div>
        </div>
    </div>
</div>
