From d6ab339127c6794f420ede91cf0f5a068110e0f3 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 2 Feb 2021 14:35:45 +0200
Subject: [PATCH] refactor(docs-infra): simplify the CSS rules for styling the
 "collapsed/expanded" sidenav icons (#40427)

This commit simplifies the styling of the "collapsed/expanded" icons in
sidenav nav-items with children by consolidating the CSS rules in one
block (instead of having duplicate blocks for different levels).

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

diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index fe4198f7b2c..b1211e7ac94 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -149,17 +149,6 @@ button.vertical-menu-item {
   padding-left: 20px;
   margin: 0;
   transition: background-color 0.2s;
-
-  &.expanded .mat-icon,
-  .level-2.expanded .mat-icon {
-    @include rotate(90deg);
-  }
-
-  &:not(.expanded) .mat-icon,
-  .level-2:not(.expanded) .mat-icon {
-    @include rotate(0deg);
-  }
-
 }
 
 .level-2 {
@@ -169,16 +158,6 @@ button.vertical-menu-item {
   font-weight: 400;
   margin: 0;
   padding-left: 36px;
-
-  &.expanded .mat-icon,
-  .level-3.expanded .mat-icon {
-    @include rotate(90deg);
-  }
-
-  &:not(.expanded) .mat-icon,
-  .level-3:not(.expanded) .mat-icon {
-    @include rotate(0deg);
-  }
 }
 
 .level-3 {
@@ -197,6 +176,16 @@ button.vertical-menu-item {
   padding-left: 52px;
 }
 
+.level-1, .level-2, .level-3 {
+  &.collapsed > .mat-icon {
+    @include rotate(0deg);
+  }
+
+  &.expanded > .mat-icon {
+    @include rotate(90deg);
+  }
+}
+
 aio-nav-menu.top-menu {
   padding: 24px 0 0;