data.component.html 5.18 KB
<td-layout-nav logo="assets:covalent">
  <div td-toolbar-content layout="row" layout-align="center center" flex>
    <span>Quickstart</span>
    <span flex></span>
    <a md-icon-button mdTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank">
      <md-icon>chrome_reader_mode</md-icon>
    </a>
    <a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank">
      <md-icon svgIcon="assets:github"></md-icon>
    </a>
  </div>
  <td-layout-manage-list #manageList [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
    <md-toolbar td-sidenav-content>
      <span>Відомості</span>
    </md-toolbar>
    <md-nav-list td-sidenav-content>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['road']">
        <md-icon md-list-icon>dashboard</md-icon>
        Автомобільні дороги
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['authority']">
        <md-icon md-list-icon>dashboard</md-icon>
        Органи управління
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['contractor']">
        <md-icon md-list-icon>dashboard</md-icon>
        Підрядники з експлуатаційного утримання
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['road-service']">
        <md-icon md-list-icon>insert_chart</md-icon>
        Обслуговування
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['settlement-address-link']">
        <md-icon md-list-icon>star</md-icon>
        Прив'язки населених пунктів
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['flow-intensity']">
        <md-icon md-list-icon>dashboard</md-icon>
        Інтенсивності
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['road-to-category']">
        <md-icon md-list-icon>dashboard</md-icon>
        Категорія доріг
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['cross-section']">
        <md-icon md-list-icon>dashboard</md-icon>
        З'їзди
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['road-width']">
        <md-icon md-list-icon>dashboard</md-icon>
        Ширина проїзних частин
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['road-surface']">
        <md-icon md-list-icon>dashboard</md-icon>
        Покриття доріг
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['service-object']">
        <md-icon md-list-icon>dashboard</md-icon>
        Об'єкти сервісу
      </a>
      <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['bus-stop']">
        <md-icon md-list-icon>dashboard</md-icon>
        Автобусні зупинки
      </a>
    </md-nav-list>
    <div td-toolbar-content layout="row" layout-align="start center" flex>
      <span>{{title}}</span>
      <span flex></span>
      <button md-icon-button>
        <md-icon class="md-24">view_module</md-icon>
      </button>
      <button md-icon-button>
        <md-icon class="md-24">sort</md-icon>
      </button>
      <button md-icon-button>
        <md-icon class="md-24">settings</md-icon>
      </button>
      <button md-icon-button>
        <md-icon class="md-24">more_vert</md-icon>
      </button>
    </div>
    <router-outlet></router-outlet>
  </td-layout-manage-list>
</td-layout-nav>