Merge pull request #1715 from yurytut1993/BCTHEME-50

feature(bctheme): BCTHEME-50 ability to load subcategories and expand them if there are other categories beneath it
bigcommerce · Jul 16, 2020 · 8659aa1 · 8659aa1
2 parents 3cfd1c1 + 42268b7
commit 8659aa1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 10 deletions.
diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss
@@ -194,6 +194,14 @@
     text-decoration: none;
     text-transform: uppercase;
 
+    &.has-subMenu {
+        .navPages-list:not(.navPages-list-depth-max) & {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
     @include breakpoint("medium") {
         display: inline-block;
         padding: spacing("half") (spacing("half") + spacing("quarter")) (spacing("half") + spacing("quarter"));
@@ -240,16 +248,28 @@
 
 .navPages-action-moreIcon {
     @include square(8px);
-    margin-left: spacing("quarter");
+    margin-left: spacing("half");
     transform: rotate(-90deg);
 
     @include breakpoint("medium") {
         transform: none;
     }
 
-    .has-subMenu.is-open & {
+    .has-subMenu.is-open &,
+    .collapsible-icon-wrapper.is-open &
+    {
         transform: rotate(0);
     }
+
+    .navPages-list:not(.navPages-list-depth-max) & {
+        @include square(11px);
+        margin: 0 spacing("single");
+
+        @include breakpoint("medium") {
+            @include square(8px);
+            margin: 0 0 0 spacing("half");
+        }    
+    }
 }
 
 
@@ -268,6 +288,14 @@
     &.is-open {
         display: block;
     }
+
+    .navPage-subMenu-action:not(.navPages-action-depth-max) + & {
+        margin-left: spacing("double"); // 
+
+        @include breakpoint("medium") {
+            margin-left: 0;
+        }
+    }
 }
 
 
@@ -303,6 +331,16 @@
     &.is-open {
         display: block;
     }
+
+    .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu + & {
+        .navPage-subMenu-list {
+            margin-right: 0;
+
+            @include breakpoint("medium") {
+                margin-right: auto;
+            }    
+        }
+    }
 }
 
 .has-subMenu.is-root + .navPage-subMenu-horizontal {
@@ -379,9 +417,30 @@
 .navPage-subMenu-action {
     padding: spacing("half") 0;
 
+    .navPages-list:not(.navPages-list-depth-max) & {
+        padding: 0 0 0 spacing("single");
+
+        @include breakpoint("medium") {
+            padding: spacing("half") 0 (spacing("half") + spacing("quarter"));
+        }
+    }
+
     @include breakpoint("medium") {
         padding: spacing("half") 0 (spacing("half") + spacing("quarter"));
     }
+
+    .collapsible-icon-wrapper {
+        height: 100%;
+        width: 100%;
+        box-sizing: content-box;
+        padding: spacing("half") 0;
+        display: inline-block;
+        text-align: right;
+
+        @include breakpoint("medium") {
+            display: none;
+        }
+    }
 }
 
 

diff --git a/templates/components/common/navigation-dropdown.html b/templates/components/common/navigation-dropdown.html
@@ -7,7 +7,7 @@
             <li class="navPage-subMenu-item-child">
                 {{#if children}}
                     <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
-                        {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                        {{name}}<i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
                     </a>
                     {{> components/common/navigation-dropdown}}
                 {{else}}

diff --git a/templates/components/common/navigation-list-alternate.html b/templates/components/common/navigation-list-alternate.html
@@ -1,6 +1,6 @@
 {{#if children}}
     <a class="navPages-action navPages-action-depth-max has-subMenu is-root{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
-        {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+        {{name}}<i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
     </a>
     {{> components/common/navigation-dropdown}}
 {{else}}

diff --git a/templates/components/common/navigation-list.html b/templates/components/common/navigation-list.html
@@ -1,6 +1,6 @@
 {{#if children}}
 <a class="navPages-action has-subMenu{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
-    {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+    {{name}}<i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
 </a>
 <div class="navPage-subMenu" id="navPages-{{id}}" aria-hidden="true" tabindex="-1">
     <ul class="navPage-subMenu-list">
@@ -13,11 +13,14 @@
                     <a
                         class="navPage-subMenu-action navPages-action has-subMenu{{#if is_active}} activePage{{/if}}"
                         href="{{url}}"
-                        data-collapsible="navPages-{{id}}"
-                        data-collapsible-disabled-breakpoint="medium"
-                        data-collapsible-disabled-state="open"
-                        data-collapsible-enabled-state="closed">
-                        {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+>
+                        {{name}}<span class="collapsible-icon-wrapper"
+                                    data-collapsible="navPages-{{id}}"
+                                    data-collapsible-disabled-breakpoint="medium"
+                                    data-collapsible-disabled-state="open"
+                                    data-collapsible-enabled-state="closed">
+                                        <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                                </span>
                     </a>
                     <ul class="navPage-childList" id="navPages-{{id}}">
                         {{#each children}}