fix the tabs

NUM-Forschungsdatenplattform · Aug 9, 2024 · 6cdb07f · 6cdb07f
1 parent eec3cf0
commit 6cdb07f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/src/app/core/constants/navigation.ts b/src/app/core/constants/navigation.ts
@@ -48,7 +48,6 @@ export const mainNavItems: INavItem[] = [
         routeTo: 'projects/new/editor',
         id: 'editor',
         translationKey: 'NAVIGATION.PROJECTS_EDITOR',
-        disabled: true,
       },
     ],
   },

diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html
@@ -33,8 +33,7 @@ <h1 data-test="header__page-headline">
     </h1>
     <nav mat-tab-nav-bar *ngIf="currentTabNav && !unapprovedUser" [tabPanel]="tabPanel">
       <ng-container *ngFor="let tab of currentTabNav">
-        <a
-          color="primary"
+        <span
           class="no-focus"
           mat-tab-link
           [routerLink]="tab.routeTo"
@@ -47,9 +46,9 @@ <h1 data-test="header__page-headline">
           *numUserHasRole="tab.roles"
         >
           {{ tab.translationKey | translate }}
-        </a>
+        </span>
       </ng-container>
     </nav>
-    <div mat-tab-nav-panel #tabPanel></div>
+    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
   </div>
 </section>
diff --git a/src/app/layout/components/header/header.component.scss b/src/app/layout/components/header/header.component.scss
@@ -1,3 +1,6 @@
+@import '../../../../styles/themes';
+$accent: map-get($num-portal-webapp-theme, accent);
+
 .toolbar {
   background: transparent;
   font-size: 14px;
@@ -12,6 +15,17 @@
   color: black;
   opacity: 1;
 }
+.mat-mdc-tab-link.mat-mdc-tab-disabled {
+  cursor: default;
+}
+.mat-mdc-tab-link.mat-mdc-tab-disabled.mdc-tab-indicator--active {
+  color: mat-color($accent) !important;
+  opacity: 1;
+}
+
+.mat-mdc-tab-link {
+  cursor: pointer;
+}
 
 .header-image {
   background-image: url('../../../../assets/welcome-header.jpg');

diff --git a/src/styles/custom-material/styles/_buttons.themed.scss b/src/styles/custom-material/styles/_buttons.themed.scss
@@ -14,6 +14,9 @@
   .mat-mdc-button-base {
     text-transform: uppercase !important;
   }
+  .mdc-icon-button {
+    font-size: inherit !important;
+  }
 
   .num-button {
     /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/