How to configure ui-router for angular1 correctly?

Help us understand the nested routing ui-router. Here is a simple example.

There are 3 urls:

/main

/main/apples

/main/oranges

There is a navigation of two items: apples and oranges. It is only present on the /main/apples and /main/oranges pages and is used to switch between these pages. A div with this navigation should not reload when switching between these two sections.

angular.module('fruits', ['ui.router']);

angular.module('fruits').config(function($stateProvider, $urlRouterProvider, $locationProvider){

  $stateProvider.state({
      name: 'main',
      url: '/main',
      templateUrl: 'templates/main.html'
  });

  $stateProvider.state({
      name: 'main.oranges',
      url: '/oranges',
      templateUrl: 'templates/oranges.html'
  });

  $stateProvider.state({
      name: 'main.apples',
      url: '/apples',
      templateUrl: 'templates/apples.html'
  });

  $urlRouterProvider.otherwise('/');

  $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
  });

});

Main.html:

<!-- Заголовок и текст главной страницы, которые должны присутствовать только на главной странице -->
<h1> Главная страница </h1>
<span> Содержимое главной страницы </span>

<!-- Навигация, которая должна присутствовать только на страницах /main/oranges и /main/apples и не перезагружаться при переходе между ними -->
<div class="navigation">
  <a ui-sref="main.oranges"> Яблоки </a>
  <a ui-sref="main.apples"> Апельсины </a>
</div>

<ui-view> </ui-view>

I need the /main/oranges and /main/apples pages to have no main page content, but still have navigation. Right now, the /main/oranges and /main/apples pages are both.

Thanks for the Grundy tip. Changed the code as follows:

Main.html:

<div ui-view="fruits-main"></div> 
<div ui-view="nav"></div>
<ui-view></ui-view>

App.js:

angular.module('fruits', ['ui.router']);

angular.module('fruits').config(function($stateProvider, $urlRouterProvider, $locationProvider){

  $stateProvider.state({
      name: 'main',
      url: '/main',

      views: {
        '': {
          templateUrl: 'templates/main.html',
        },

        'fruits-main@main': {
          templateUrl: 'templates/fruits-main.html',
        }
      }
  });

  $stateProvider.state({
      name: 'main.apples',
      url: '/apples',

      views: {
        '': {
          templateUrl: 'templates/apples.html',
        },
        'nav': {
          templateUrl: 'templates/nav.html',
        },
        'fruits-main': {
          abstract: true,
        }
      }
  });

  $stateProvider.state({
      name: 'main.oranges',
      url: '/oranges',

      views: {
        '': {
          templateUrl: 'templates/oranges.html',
        },
        'nav': {
          templateUrl: 'templates/nav.html',
        },
        'fruits-main': {
          abstract: true,
        }
      }
  });

  $urlRouterProvider.otherwise('/');

  $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
  });

});

But one problem is not solved. Navigation is reloaded every time you move from one section to another. How be?

Apples.html

<h1> Яблоки </h1>
<p>Текст о яблоках</p>

Nav.html

<!-- Навигация, которая должна присутствовать только на страницах /main/oranges и /main/apples и не перезагружаться при переходе между этими разделами -->
<div class="navigation">            
    <a ui-sref="main.apples" ui-sref-active="active"> Яблоки </a>
    <a ui-sref="main.oranges" ui-sref-active="active"> Апельсины </a>             
    <div class="animation"></div>
</div>

Fruits-main.html

<h1>Главная страница</h1>
<p>Какой-то текст на главной странице</p>  

Css:

*{
  margin: 0;
  padding: 0;
}

.active{
  color: red !important;
}


@-webkit-keyframes go {
  from {
    left: 0px;
  }
  to {
    left: 500px;
  }
}


.animation{
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  left: 0;

  -webkit-animation: go 1s infinite alternate;
}