From 057ed370aa1e5ec5c5ffde535d536a19c327e8ef Mon Sep 17 00:00:00 2001
From: kian <kian23kpt@gmail.com>
Date: Wed, 16 Jun 2021 03:08:55 +0430
Subject: [PATCH] fix(material/api-theme): fix nav items hover/focus contrast
 (#1004)

- fix hover and focus indicators on header nav items to have sufficient contrast

Fixes #759
---
 .../src/app/shared/navbar/_navbar-theme.scss             | 9 +++++++++
 material.angular.io/src/app/shared/navbar/navbar.html    | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/material.angular.io/src/app/shared/navbar/_navbar-theme.scss b/material.angular.io/src/app/shared/navbar/_navbar-theme.scss
index efa8e04aff67..97a0078d1ccf 100644
--- a/material.angular.io/src/app/shared/navbar/_navbar-theme.scss
+++ b/material.angular.io/src/app/shared/navbar/_navbar-theme.scss
@@ -13,6 +13,15 @@
 
     .docs-navbar, .docs-navbar-header {
       background: mat.get-color-from-palette($primary);
+
+      & a:hover, & a:focus {
+        background: rgba(0, 0, 0, 0.4);
+        color: mat.get-color-from-palette($accent, 200);
+      }
+
+      .docs-navbar-header-item-selected {
+        background: rgba(0, 0, 0, 0.2);
+      }
     }
   }
 }
diff --git a/material.angular.io/src/app/shared/navbar/navbar.html b/material.angular.io/src/app/shared/navbar/navbar.html
index 6fc87daea410..67ce84f58872 100644
--- a/material.angular.io/src/app/shared/navbar/navbar.html
+++ b/material.angular.io/src/app/shared/navbar/navbar.html
@@ -14,8 +14,9 @@
   </a>
   <a mat-button class="docs-navbar-hide-small docs-button"
      *ngFor="let key of sectionKeys"
-     [routerLink]="key">{{sections[key].name}}</a>
-  <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides">Guides</a>
+     [routerLink]="key"
+     routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
+  <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
   <div class="flex-spacer"></div>
   <version-picker></version-picker>
   <theme-picker></theme-picker>