Merge pull request #1354 from Ubersmake/taruntds-activepage

taruntds's "Added "activePage" as a active class in navigation menu and web pages"
bigcommerce · Sep 24, 2018 · dae209e · dae209e
2 parents 2f66c11 + 6e8da46
commit dae209e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix carousel dots overlapping thumbnails on Product page. [#1351](https://github.com/bigcommerce/cornerstone/pull/1351)
 - Cornerstone schema updates and organization [#1350](https://github.com/bigcommerce/cornerstone/pull/1350)
 - Add div and id attributes so that contact form steps can be tracked [#1317](https://github.com/bigcommerce/cornerstone/pull/1317)
+- Added "activePage" as a active class in navigation menus and web pages. [#1354](https://github.com/bigcommerce/cornerstone/pull/1354)
 
 ## 2.4.0 (2018-09-14)
 - Fix encoding issues on Account Signup Form ("&#039;" characters showing in country name)[#1341] (https://github.com/bigcommerce/cornerstone/pull/1341)

diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss
@@ -209,7 +209,7 @@
         }
     }
 
-    &:hover {
+    &:hover, &.activePage {
         color: stencilColor("navPages-color-hover");
 
         // scss-lint:disable NestingDepth

diff --git a/templates/components/common/navigation-dropdown.html b/templates/components/common/navigation-dropdown.html
@@ -6,12 +6,12 @@
         {{#each children}}
             <li class="navPage-subMenu-item-child">
                 {{#if children}}
-                    <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu" href="{{url}}" data-collapsible="navPages-{{id}}">
+                    <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>
                     </a>
                     {{> components/common/navigation-dropdown}}
                 {{else}}
-                    <a class="navPage-subMenu-action navPages-action" href="{{url}}">{{name}}</a>
+                    <a class="navPage-subMenu-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                 {{/if}}
             </li>
         {{/each}}

diff --git a/templates/components/common/navigation-list-alternate.html b/templates/components/common/navigation-list-alternate.html
@@ -1,8 +1,8 @@
 {{#if children}}
-    <a class="navPages-action navPages-action-depth-max has-subMenu is-root" href="{{url}}" data-collapsible="navPages-{{id}}">
+    <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>
     </a>
     {{> components/common/navigation-dropdown}}
 {{else}}
-    <a class="navPages-action" href="{{url}}">{{name}}</a>
+    <a class="navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
 {{/if}}
diff --git a/templates/components/common/navigation-list.html b/templates/components/common/navigation-list.html
@@ -1,5 +1,5 @@
 {{#if children}}
-<a class="navPages-action has-subMenu" href="{{url}}" data-collapsible="navPages-{{id}}">
+<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>
 </a>
 <div class="navPage-subMenu" id="navPages-{{id}}" aria-hidden="true" tabindex="-1">
@@ -11,7 +11,7 @@
             <li class="navPage-subMenu-item">
                 {{#if children}}
                     <a
-                        class="navPage-subMenu-action navPages-action has-subMenu"
+                        class="navPage-subMenu-action navPages-action has-subMenu{{#if is_active}} activePage{{/if}}"
                         href="{{url}}"
                         data-collapsible="navPages-{{id}}"
                         data-collapsible-disabled-breakpoint="medium"
@@ -22,17 +22,17 @@
                     <ul class="navPage-childList" id="navPages-{{id}}">
                         {{#each children}}
                         <li class="navPage-childList-item">
-                            <a class="navPage-childList-action navPages-action" href="{{url}}">{{name}}</a>
+                            <a class="navPage-childList-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                         </li>
                         {{/each}}
                     </ul>
                 {{else}}
-                    <a class="navPage-subMenu-action navPages-action" href="{{url}}">{{name}}</a>
+                    <a class="navPage-subMenu-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                 {{/if}}
             </li>
         {{/each}}
     </ul>
 </div>
 {{else}}
-<a class="navPages-action" href="{{url}}">{{name}}</a>
+<a class="navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
 {{/if}}
diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html
@@ -16,7 +16,7 @@
         {{#unless theme_settings.hide_content_navigation}}
             {{#each pages}}
                  <li class="navPages-item navPages-item-page">
-                     <a class="navPages-action" href="{{url}}">{{name}}</a>
+                     <a class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                  </li>
              {{/each}}
         {{/unless}}