From f1d2afa4963d033c296bbdab28d0971ff46f7a70 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 2 Feb 2021 14:35:42 +0200
Subject: [PATCH] fix(docs-infra): fix padding in sidenav and ensure all
 nav-items have equal height (#40427)

This commit improves the padding nav-menus and nav-items in the sidenav.
It also ensures that all nav-items have the same height, regardless of
their level and of whether they have children or not.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427
---
 aio/src/styles/1-layouts/_sidenav.scss | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 88d69ec2817..7d590ae0fa4 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -6,17 +6,21 @@
 aio-nav-menu {
   display: block;
   margin: 0 auto;
-  max-width: 260px;
+  max-width: 268px;
   @include font-size(13);
 
+  &:first-of-type {
+    margin-top: 16px;
+  }
+
+  &:last-of-type {
+    margin-bottom: 16px;
+  }
+
   ul, a {
     margin: 0;
   }
 
-  &:first-child {
-    margin-top: 16px;
-  }
-
   aio-nav-item div a {
     padding-left: 6px;
   }
@@ -27,7 +31,6 @@ mat-sidenav.mat-sidenav.sidenav {
   top: 64px;
   bottom: 0;
   left: 0;
-  padding: 0;
   min-width: 260px;
   background-color: $superlightgray;
   border-right: 1px solid $lightgray;
@@ -75,7 +78,7 @@ mat-sidenav-container div.mat-sidenav-content {
   &:hover {
     background-color: $lightgray;
     color: $blue;
-    text-shadow: 0 0 5px #ffffff;
+    text-shadow: 0 0 5px $white;
   }
 
   &:focus {
@@ -86,11 +89,6 @@ mat-sidenav-container div.mat-sidenav-content {
     color: $darkblue;
   }
 
-  &.level-2 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-
   span {
     padding-right: 32px;
   }
@@ -105,8 +103,6 @@ mat-sidenav-container div.mat-sidenav-content {
 button.vertical-menu-item {
   border: none;
   background-color: transparent;
-  padding-top: 10px;
-  padding-bottom: 10px;
   margin: 0;
   width: 100%;
 }