feat: optional indentation in sidebar-nav

Author: mrholek

scss/_sidebar.scss

@@ -370,6 +370,32 @@
   }
 }
 
+
+.c-sidebar-nav[data-indentation="true"] {
+  $wrapper-class-name: ".c-sidebar-nav-dropdown-items";
+  @for $i from 1 through $sidebar-nav-indentation-levels {
+    #{$wrapper-class-name} {
+      .c-sidebar-nav-link {
+        @include ltr {
+          padding-left: $sidebar-nav-icon-width + ($i * $sidebar-nav-indentation-size);
+        }
+        @include rtl {
+          padding-right: $sidebar-nav-icon-width + ($i * $sidebar-nav-indentation-size);
+        }
+        .c-sidebar-nav-icon {
+          @include ltr {
+            margin-left: - $sidebar-nav-icon-width;
+          }
+          @include rtl {
+            margin-right: - $sidebar-nav-icon-width;
+          }
+        }
+      }
+    }
+    $wrapper-class-name: selector-nest($wrapper-class-name, $wrapper-class-name);
+  }
+}
+
 .c-sidebar-nav-label {
   display: flex;
   padding: ($sidebar-nav-link-padding-y / 4) $sidebar-nav-link-padding-x;

scss/variables/components/_sidebar.scss

@@ -71,6 +71,9 @@ $sidebar-nav-link-padding-y:    .8445rem !default;
 $sidebar-nav-link-padding-x:    1rem !default;
 $sidebar-nav-icon-width:        56px !default;
 
+$sidebar-nav-indentation-levels: 5 !default;
+$sidebar-nav-indentation-size:   8px !default;
+
 $sidebar-dark-nav-title-color:      rgba($white, .6) !default;
 $sidebar-dark-nav-link-color:       rgba($white, .8) !default;
 $sidebar-dark-nav-link-bg:          transparent !default;