From c3ca7d5e28f9129522c3233459ba825da103d90e Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 17 Mar 2020 14:36:43 +0100
Subject: [PATCH] Clean up selectors for nested navigation levels

---
 scss/_patterns_side-navigation.scss | 30 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
index a0f4214f19..51ab505b30 100644
--- a/scss/_patterns_side-navigation.scss
+++ b/scss/_patterns_side-navigation.scss
@@ -31,26 +31,32 @@
     display: flex;
     padding: $spv-inner--x-small $sph-inner $spv-inner--x-small $sph-inner;
 
-    // nested 2 or 3 levels
-    .p-side-navigation__item .p-side-navigation__item & {
-      padding-left: 2 * $sph-inner;
-    }
-
-    .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
-      padding-left: 3 * $sph-inner;
-    }
+    // space for the right hand icon with default inner spacing on the left
+    $icon-spacing-width: map-get($icon-sizes, default) + $sph-inner;
 
     .p-side-navigation--icons & {
-      padding-left: 2 * $sph-inner + map-get($icon-sizes, default);
+      padding-left: $sph-inner + $icon-spacing-width;
       position: relative;
     }
 
-    .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item & {
-      padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + $sph-inner;
+    // nested 2nd level of navigation
+    .p-side-navigation__item .p-side-navigation__item & {
+      padding-left: 2 * $sph-inner;
+
+      // add spacing for variant with right side icons
+      .p-side-navigation--icons & {
+        padding-left: 2 * $sph-inner + $icon-spacing-width;
+      }
     }
 
+    // nested 3rd level of navigation
     .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
-      padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + 2 * $sph-inner;
+      padding-left: 3 * $sph-inner;
+
+      // add spacing for variant with right side icons
+      .p-side-navigation--icons & {
+        padding-left: 3 * $sph-inner + $icon-spacing-width;
+      }
     }
   }