| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one or more |
| ~ contributor license agreements. See the NOTICE file distributed with |
| ~ this work for additional information regarding copyright ownership. |
| ~ The ASF licenses this file to You under the Apache License, Version 2.0 |
| ~ (the "License"); you may not use this file except in compliance with |
| ~ the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| ~ |
| --> |
| |
| <div fxLayout="column" class="page-container"> |
| <div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav"> |
| <div fxFlex="100" class="page-container-nav pr-5" fxLayout="row"> |
| <div |
| fxLayout="row" |
| fxLayoutAlign="start center" |
| style="border-right: 2px solid var(--color-bg-2)" |
| *ngIf="showBackLink" |
| > |
| <button |
| mat-icon-button |
| color="accent" |
| matTooltip="Back" |
| (click)="navigateBack()" |
| class="edit-menu-btn" |
| data-cy="save-data-explorer-go-back-to-overview" |
| > |
| <mat-icon>arrow_back</mat-icon> |
| </button> |
| </div> |
| <nav mat-tab-nav-bar mat-stretch-tabs="false" color="accent"> |
| <a |
| mat-tab-link |
| *ngFor="let item of spNavigationItems" |
| (click)="navigateTo(item)" |
| [active]="activeLink === item.itemId" |
| [attr.data-cy]="'tab-' + item.itemTitle" |
| > |
| <span>{{ item.itemTitle }}</span> |
| </a> |
| </nav> |
| <span fxFlex></span> |
| <ng-content |
| select="[nav]" |
| fxFlex="100" |
| fxLayout="row" |
| fxLayoutAlign="end center" |
| ></ng-content> |
| </div> |
| </div> |
| |
| <div |
| class="fixed-height" |
| [ngStyle]="{ padding: padding }" |
| fxLayout="column" |
| fxFlex="100" |
| > |
| <ng-content fxFlex="100"></ng-content> |
| </div> |
| </div> |
