data.component.html 4.7 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]="['/product']">
                <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]="['stats']">
                <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]="['features']">
                <md-icon md-list-icon>star</md-icon>
                Прив'язки населених пунктів
            </a>
            <a md-list-item (click)="!media.query('gt-sm') && manageList.close()" md-ripple class="block relative">
                <md-icon md-list-icon>people</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]="['/product']">
                <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]="['/product']">
                <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]="['/product']">
                <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]="['/product']">
                <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]="['/product']">
                <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>