Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

Commit

Permalink
Merge pull request #166 from pat270/simplify-sidebar-nav
Browse files Browse the repository at this point in the history 
Simplify Site Sidebar Nav
  • Loading branch information
@diegonvs
diegonvs authored May 28, 2019
2 parents 020f8d4 + afd92c9 commit fdffdde
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 115 deletions.
33 changes: 16 additions & 17 deletions src/components/Sidebar/Navigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import React from 'react';
import classNames from 'classnames';
import { Link, withPrefix } from "gatsby"

class Navigation extends React.Component {
_handleOnClick(index, depth, section, event) {
event.stopPropagation();
const el = event.currentTarget;

const elementRef = this.refs[`navItem${index}${depth}`];
event.preventDefault();
event.stopPropagation();

if (!elementRef.classList.contains('active') || !!section.items) {
elementRef.classList.toggle('active');
}
el.classList.toggle('active');
}

_isActive(section) {
Expand All @@ -29,14 +27,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} onClick={this._handleOnClick.bind(this, index, depth, section)}>
<Anchor page={section} />
<li key={index} ref={`navItem${index}${depth}`} className={style}>
<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} />
Expand All @@ -48,19 +43,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}) => {
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">
<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>
Expand All @@ -70,7 +69,7 @@ const Anchor = ({page}) => {
return (
<Link
to={`${page.link}.html`}
className="align-middle"
className={style}
>
<span>{page.title}</span>
</Link>
Expand Down
132 changes: 34 additions & 98 deletions src/styles/site/_sidebar-site.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@
padding-bottom: 0.1875rem;
}

a, .nav .clay-icon {
color: $brand-secondary;
}

.sidebar-header {
background-color: $brand-light;
padding: 0;
Expand All @@ -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%;

Expand Down Expand Up @@ -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);
}
}
Expand Down

0 comments on commit fdffdde

Please sign in to comment.