From e3a2ca5ad97583218f843438d75498a71ec331e0 Mon Sep 17 00:00:00 2001
From: Esteban Marin <estebanmarin@gmx.ch>
Date: Wed, 12 Dec 2018 07:51:50 +0100
Subject: [PATCH] fix(docs-infra): fix top menu item clickable area (#27633)

the clickable region of the top menu item is expanded beyond the focused area, so the clickable area is spans the entire height of the navigation

fixes #27618

PR Close #27633
---
 aio/src/app/layout/top-menu/top-menu.component.ts |  6 +++++-
 aio/src/styles/1-layouts/_top-menu.scss           | 15 +++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts
index 7cf09713e2..3eff5116fd 100644
--- a/aio/src/app/layout/top-menu/top-menu.component.ts
+++ b/aio/src/app/layout/top-menu/top-menu.component.ts
@@ -5,7 +5,11 @@ import { NavigationNode } from 'app/navigation/navigation.service';
   selector: 'aio-top-menu',
   template: `
     <ul role="navigation">
-      <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.url" [title]="node.title">{{ node.title }}</a></li>
+      <li *ngFor="let node of nodes">
+        <a class="nav-link" [href]="node.url" [title]="node.title">
+          <span class="nav-link-inner">{{ node.title }}</span>
+        </a>
+      </li>
     </ul>`
 })
 export class TopMenuComponent {
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 4c939f3fcb..6f72ab3b29 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -147,13 +147,20 @@ aio-top-menu {
 
   a.nav-link {
     margin: 0;
-    padding: 8px 16px;
+    padding: 24px 0px;
     cursor: pointer;
-    border-radius: 4px;
-      
+
+    .nav-link-inner {
+      padding: 8px 16px;
+    }
+
     &:focus {
-      background: rgba($white, 0.15);
       outline: none;
+
+      .nav-link-inner {
+        background: rgba($white, 0.15);
+        border-radius: 4px;
+      }
     }
   }
 }