Display nav-list-expander on the right side

(cherry picked from commit 2d6e97e0cbfb8bdcf87a2e5ad19bd59fc8f5405d)

_sass/navigation.scss

@@ -22,14 +22,25 @@
       min-height: $nav-list-item-height-sm;
       line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
       padding-top: $sp-1;
-      padding-right: $gutter-spacing-sm;
       padding-bottom: $sp-1;
-      padding-left: $nav-list-item-height-sm;
+      @if $nav-list-expander-right {
+        padding-right: $nav-list-item-height-sm;
+        padding-left: $gutter-spacing-sm;
+      } @else {
+        padding-right: $gutter-spacing-sm;
+        padding-left: $nav-list-item-height-sm;
+      }
 
       @include mq(md) {
         min-height: $nav-list-item-height;
         line-height: #{$nav-list-item-height - 2 * $sp-1};
-        padding-left: $nav-list-item-height;
+        @if $nav-list-expander-right {
+          padding-right: $nav-list-item-height;
+          padding-left: $gutter-spacing;
+        } @else {
+          padding-right: $gutter-spacing;
+          padding-left: $nav-list-item-height;
+        }
       }
 
       &.active {
@@ -45,6 +56,9 @@
 
     .nav-list-expander {
       position: absolute;
+      @if $nav-list-expander-right {
+        right: 0;
+      }
       width: $nav-list-item-height-sm;
       height: $nav-list-item-height-sm;
       padding-top: #{$nav-list-item-height-sm / 4};
@@ -65,6 +79,12 @@
       &:hover {
         background-color: $feedback-color;
       }
+
+      @if $nav-list-expander-right {
+        svg {
+          transform: rotate(90deg);
+        }
+      }
     }
 
     > .nav-list {
@@ -78,12 +98,20 @@
         .nav-list-link {
           color: $nav-child-link-color;
         }
+
+        .nav-list-expander {
+          fill: $nav-child-link-color;
+        }
       }
     }
 
     &.active {
       > .nav-list-expander svg {
-        transform: rotate(90deg);
+        @if $nav-list-expander-right {
+          transform: rotate(-90deg);
+        } @else {
+          transform: rotate(90deg);
+        }
       }
 
       > .nav-list {

_sass/support/_variables.scss

@@ -115,6 +115,7 @@ $nav-width: 264px !default;
 $nav-width-md: 248px !default;
 $nav-list-item-height: $sp-6 !default;
 $nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: 500px !default;