From 0bd3ebfc8fcbc85906b9e6d29ac6b297a85520e7 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 17 May 2019 17:10:13 -0700
Subject: [PATCH 1/3] Sidebar Navigation move onclick to the Anchor so we don't
 have `#no` in the address bar

---
 src/components/Sidebar/Navigation.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/Navigation.js b/src/components/Sidebar/Navigation.js
index 87c66824..8ac8f915 100644
--- a/src/components/Sidebar/Navigation.js
+++ b/src/components/Sidebar/Navigation.js
@@ -4,6 +4,7 @@ import { Link, withPrefix } from "gatsby"
 
 class Navigation extends React.Component {
     _handleOnClick(index, depth, section, event) {
+        event.preventDefault();
         event.stopPropagation();
 
         const elementRef = this.refs[`navItem${index}${depth}`];
@@ -35,8 +36,8 @@ class Navigation extends React.Component {
             });
 
             return(
-                <li key={index} ref={`navItem${index}${depth}`} className={style} onClick={this._handleOnClick.bind(this, index, depth, section)}>
-                    <Anchor page={section} />
+                <li key={index} ref={`navItem${index}${depth}`} className={style}>
+                    <Anchor page={section} onclick={this._handleOnClick.bind(this, index, depth, section)} />
 
                     {section.items && (
                         <Navigation sectionList={section.items} location={location} depth={depth + 1} />
@@ -55,10 +56,10 @@ class Navigation extends React.Component {
     }
 }
 
-const Anchor = ({page}) => {
+const Anchor = ({page, onclick}) => {
     if (page.items) {
         return(
-            <a className="align-middle" href="#no">
+            <a className="align-middle" href="#no" onClick={onclick}>
                 <span>{page.title}</span>
                 <svg className="collapse-toggle clay-icon icon-monospaced">
                     <use xlinkHref={withPrefix("images/icons/icons.svg#caret-bottom")} />

From fd6e3e4413f8b01c951918c8bd587d5061779dda Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 20 May 2019 11:48:18 -0700
Subject: [PATCH 2/3] Follow Bootstrap's pattern and move `.active` class on
 anchor instead of `li`

---
 src/components/Sidebar/Navigation.js |  29 +++---
 src/styles/site/_sidebar-site.scss   | 132 +++++++--------------------
 2 files changed, 48 insertions(+), 113 deletions(-)

diff --git a/src/components/Sidebar/Navigation.js b/src/components/Sidebar/Navigation.js
index 8ac8f915..7309b8df 100644
--- a/src/components/Sidebar/Navigation.js
+++ b/src/components/Sidebar/Navigation.js
@@ -4,14 +4,12 @@ import { Link, withPrefix } from "gatsby"
 
 class Navigation extends React.Component {
     _handleOnClick(index, depth, section, event) {
+        const el = event.currentTarget;
+
         event.preventDefault();
         event.stopPropagation();
 
-        const elementRef = this.refs[`navItem${index}${depth}`];
-
-        if (!elementRef.classList.contains('active') || !!section.items) {
-            elementRef.classList.toggle('active');
-        }
+        el.classList.toggle('active');
     }
 
     _isActive(section) {
@@ -30,14 +28,11 @@ class Navigation extends React.Component {
         const { sectionList, location, depth = 0 } = this.props;
 
         return sectionList.map((section, index) => {
-            let style = classNames({
-                'active': this._isActive(section) === true,
-                'nav-heading': section.items
-            });
+            let style = section.items ? 'nav-heading nav-item' : 'nav-item';
 
             return(
                 <li key={index} ref={`navItem${index}${depth}`} className={style}>
-                    <Anchor page={section} onclick={this._handleOnClick.bind(this, index, depth, section)} />
+                    <Anchor active={this._isActive(section)} page={section} onclick={this._handleOnClick.bind(this, index, depth, section)} />
 
                     {section.items && (
                         <Navigation sectionList={section.items} location={location} depth={depth + 1} />
@@ -49,19 +44,23 @@ class Navigation extends React.Component {
 
     render() {
         return(
-            <ul className="nav nav-nested nav-pills nav-stacked">
+            <ul className="nav nav-stacked">
                 {this.renderNavigationItems()}
             </ul>
         );
     }
 }
 
-const Anchor = ({page, onclick}) => {
+const Anchor = ({active, page, onclick}) => {
+    let style = active ? 'active nav-link ' : 'nav-link ';
+
     if (page.items) {
+        style += 'collapse-toggle';
+
         return(
-            <a className="align-middle" href="#no" onClick={onclick}>
+            <a className={style} href="#no" onClick={onclick}>
                 <span>{page.title}</span>
-                <svg className="collapse-toggle clay-icon icon-monospaced">
+                <svg className="lexicon-icon lexicon-icon-caret-bottom">
                     <use xlinkHref={withPrefix("images/icons/icons.svg#caret-bottom")} />
                 </svg>
             </a>
@@ -71,7 +70,7 @@ const Anchor = ({page, onclick}) => {
     return (
         <Link
             to={`${page.link}.html`}
-            className="align-middle"
+            className={style}
         >
             <span>{page.title}</span>
         </Link>
diff --git a/src/styles/site/_sidebar-site.scss b/src/styles/site/_sidebar-site.scss
index 928c0145..51dfdc3f 100644
--- a/src/styles/site/_sidebar-site.scss
+++ b/src/styles/site/_sidebar-site.scss
@@ -15,10 +15,6 @@
 		padding-bottom: 0.1875rem;
 	}
 
-	a, .nav .clay-icon {
-		color: $brand-secondary;
-	}
-
 	.sidebar-header {
 		background-color: $brand-light;
 		padding: 0;
@@ -38,19 +34,6 @@
 		padding-top: $base-size;
 	}
 
-	.nav-icons {
-		padding: 0 $base-size $base-size * 4 $base-size * 1.66;
-
-		.sticker-secondary {
-			background-color: #CDCED9;
-		}
-
-		.lexicon-icon {
-			fill: $brand-light;
-			width: 1.3em;
-		}
-	}
-
 	.input-group {
 		width: 100%;
 
@@ -105,103 +88,56 @@
 		}
 	}
 
-	.nav-nested {
-		margin-top: 2px;
-
-		& > li:not(.active) > ul {
-			display: none;
-		}
+	.nav > li li {
+		margin-left: 24px;
 	}
 
-	.nav-pills {
-		.nav-heading {
-			display: block;
-		}
-
-		& > li > {
-			ul > li {
-				padding-left: $base-size;
-			}
-
-			a {
-				background-color: transparent;
-				display: block;
-				line-height: $base-size / 1.375;
-				min-height: $base-size * 1.675;
-				padding: 0.55rem 1rem;
-				position: relative;
-
-				span {
-					display: inline-block;
-					vertical-align: middle;
-				}
-
-				.clay-icon {
-					display: inline-block;
-					fill: currentColor;
-					height: 16px;
-					transform: translateZ(0);
-					vertical-align: middle;
-					width: 16px;
-				}
-			}
-
-			& ul > li > ul > li > a, .nav .nav > li > a {
-				padding-left: $base-size / 2;
-			}
+	.nav-link {
+		border-radius: 6px;
+		color: $brand-secondary;
+		margin-bottom: 2px;
+		padding: 0.59375rem 1rem;
 
-			.icon-monospaced.clay-icon {
-				float: left;
-				height: 40px;
-				padding: 2px;
-			}
+		&:hover, &:focus {
+			background-color: $brand-dark-lighter;
 		}
 
-		& > li.active > a,
-		& > li > ul > li.active > a {
+		&.active {
 			background-color: $brand-dark-lighter;
-			border-radius: 6px;
-			font-weight: 600;
+			font-weight: $font-weight-semi-bold;
 		}
+	}
 
-		& > li > ul > li.active > a:focus,
-		& > li > a:focus,
-		& > li > a:hover {
-			background-color: $brand-dark-lighter;
-			border-radius: 6px;
+	.nav-link.collapse-toggle {
+		+ .nav {
+			display: none;
 		}
 
-		& li > ul > li > a {
-			color: $brand-secondary;
-			font-weight: normal;
+		&.active + .nav {
+			display: block;
 		}
+	}
 
-		& > li.nav-heading > a, & > li > ul > li.nav-heading > a {
-			&, &:focus {
-				background-color: transparent;
-			}
+	.nav-link.collapse-toggle {
+		background-color: transparent;
 
-			&:hover {
-				background-color: $brand-dark-lighter;
-			}
+		&:hover, &:focus {
+			background-color: $brand-dark-lighter;
 		}
 
-		& li {
-			> a > .collapse-toggle {
-				display: inline-block;
-				height: 40px;
-				margin: 0;
-				min-height: auto;
-				padding: 12px;
-				position: absolute;
-				right: 0;
-				top: 0;
-				transform: rotate(-90deg);
-				transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-				width: 40px;
-			}
+		.lexicon-icon {
+			display: inline-block;
+			font-size: 16px;
+			position: absolute;
+			margin-top: -8px;
+			right: 16px;
+			top: 50%;
+			transform: rotate(-90deg);
+			transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		}
 
-			&.active > a > .collapse-toggle {
+		&.active {
+			.lexicon-icon {
 				transform: rotate(0);
 			}
 		}

From afd92c9e235845d04236d715c1f3398d2237a4e5 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Tue, 21 May 2019 14:34:46 -0700
Subject: [PATCH 3/3] Remove unused import classNames in Navigation.js

---
 src/components/Sidebar/Navigation.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Sidebar/Navigation.js b/src/components/Sidebar/Navigation.js
index 7309b8df..af37d8f4 100644
--- a/src/components/Sidebar/Navigation.js
+++ b/src/components/Sidebar/Navigation.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import classNames from 'classnames';
 import { Link, withPrefix } from "gatsby"
 
 class Navigation extends React.Component {