How do I make my own navigation bar in Umbraco v8

How do I make my own navigation icons like on Packages, Users, etc. on my custom section "My Custom Section"

After some research I have found out this:

Its called navigation and here are the files:

package.manifest

{
    "sections": [
        {
            "alias": "testSection",
            "name": "Test Section"
        }
    ],
    "dashboards": [
        {
            "alias": "welcome",
            "sections": [ "testSection" ],
            "view": "~/App_Plugins/TestSection/backoffice/dashboard/sections.html"
        },
    ],
    // array of files we want to inject into the application on app_start
    "javascript": [
        "~/App_Plugins/TestSection/backoffice/dashboard/sections.controller.js"
    ]
}

sections.controller.js

(function () {
    'use strict';

    function testSectionSections($scope) {

        var tss = this;

        tss.page = {
            title: 'Test Section',
            navigation: [
                {
                    'name': 'Info',
                    'alias': 'info',
                    'icon': 'icon-info',
                    'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/TestSection/backoffice/dashboard/info.html',
                    'active': true
                },
                {
                    'name': 'Page2',
                    'alias': 'page2',
                    'icon': 'icon-box',
                    'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/TestSection/backoffice/dashboard/page2.html',
                },
            ]
        }

    };

    angular.module('umbraco')
        .controller('testSectionSectionsController', testSectionSections);
})();

sections.html

<div ng-controller="testSectionSectionsController as tss">

    <umb-editor-view footer="false">
        <umb-editor-header name="tss.page.title"
                           hide-description="true"
                           name-locked="true"
                           hide-alias="true"
                           hide-icon="true"
                           navigation="tss.page.navigation">
        </umb-editor-header>
        <umb-editor-container class="form-horizontal">
            <umb-editor-sub-views sub-views="tss.page.navigation" model="tss"></umb-editor-sub-views>
        </umb-editor-container>
    </umb-editor-view>
</div>

info.html

<h3>Welcome - Info</h3>

Note:

When I click "Test Section" I load my custom tree controller on the left and the default dashboard info.html is loaded on the right side and above the dashboard the "section navigation" is properly show on top-right.

The only issue I am having is, when I click an item on my "Tree Controller" on the left, my "section navigation" disappear. I want it to be visible all the time.

How do I do that?