feat(community-side-navigation): enhancements to side nav

added spacing below side nav, add space above and below tier 3, add drop down motion
telus · Mar 22, 2019 · 9da1782 · 9da1782
1 parent 9e59a68
commit 9da1782
Show file tree

Hide file tree

Showing 10 changed files with 490 additions and 131 deletions.
diff --git a/e2e/output/components/SideNavigation/baseline/chrome_headless.png b/e2e/output/components/SideNavigation/baseline/chrome_headless.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/SideNavigation/SideNavigation.jsx b/packages/SideNavigation/SideNavigation.jsx
@@ -45,7 +45,7 @@ class SideNavigation extends Component {
     sideNav.style.width = `${parentWidth}px`
   }
 
-  toggleOpen = id => {
+  toggleSubMenu = id => {
     if (this.checkAccordion(id, this.state.accordion)) {
       const array = [...this.state.open]
       const index = array.indexOf(id)
@@ -112,7 +112,7 @@ class SideNavigation extends Component {
     React.Children.map(this.props.children, (child, index) => {
       const id = `TDS-SideNavigation-${index}`
       if (!('href' in child.props) && child.props.active) {
-        this.toggleOpen(id)
+        this.toggleSubMenu(id)
       }
     })
   }
@@ -154,7 +154,7 @@ class SideNavigation extends Component {
               // check if href is in props to figure out if child is SubMenu or Link
               if (!('href' in child.props)) {
                 options = {
-                  onClick: this.toggleOpen,
+                  handleToggleSubMenu: this.toggleSubMenu,
                   isOpen: this.checkAccordion(id),
                   active: child.props.active,
                   id,

diff --git a/packages/SideNavigation/SideNavigation.scss b/packages/SideNavigation/SideNavigation.scss
@@ -28,8 +28,10 @@ $desktop: (
 @mixin spacingClasses ($level, $mobileValue, $desktopValue) {
   .verticalPadding-#{$level} {
     padding-top: $mobileValue;
+    padding-bottom: $mobileValue;
     @include mq($from: md) {
       padding-top: $desktopValue;
+      padding-bottom: $desktopValue;
     }
   }
 }