From 4f2a187a7f54e47efe118d84980db1c5ee2ba222 Mon Sep 17 00:00:00 2001
From: Mirco Zeiss
Date: Thu, 8 Dec 2016 16:26:46 +0100
Subject: [PATCH] navigation: allow nesting of multiple levels
---
components/navigation/Navigation.scss | 34 +++++++------
components/navigation/index.js | 15 ++++--
components/navigation/test/test.js | 59 +++++++++++++++++++++++
examples/js/components/navigationRoute.js | 31 +++++++++---
4 files changed, 112 insertions(+), 27 deletions(-)
diff --git a/components/navigation/Navigation.scss b/components/navigation/Navigation.scss
index 8595c149b..3df6f48e9 100644
--- a/components/navigation/Navigation.scss
+++ b/components/navigation/Navigation.scss
@@ -4,7 +4,6 @@
*/
nav {
- color: #333;
border-right: 1px solid rgba(0, 0, 0, 0.14);
position: fixed;
top: 0;
@@ -13,6 +12,7 @@ nav {
width: $navigation-width;
background: #fff;
font-size: 13px;
+ font-weight: 500;
visibility: hidden;
transform: translateX(-$navigation-width);
transition-duration: 0.2s;
@@ -51,11 +51,7 @@ nav.is-visible {
.Navigation {
list-style: none;
margin: 0;
- padding: 0;
padding: 12px 0 10px;
- // hide submenu when collapsed
- overflow: hidden;
- transition: height 0.25s ease-in-out;
}
.Navigation-link {
@@ -66,7 +62,6 @@ nav.is-visible {
padding-left: 22px;
padding-right: 16px;
color: #333;
- font-weight: 700;
}
.Navigation-link.active {
@@ -81,7 +76,7 @@ nav.is-visible {
.Navigation-chevron {
// point down \/
transform: rotate(90deg);
- transition: transform 0.25s ease-in-out;
+ transition: transform 0.15s ease-in-out;
}
.Navigation-chevron.is-open {
@@ -123,18 +118,25 @@ nav.is-visible {
visibility: visible;
}
+// make children in submenu grey
+.Navigation-item .Navigation-item > .Navigation-link {
+ color: rgba(0, 0, 0, 0.54);
+}
+
+// add frame (border-top and border-bottom) to those navigation items that have sub menus
+.Navigation-item.has-children {
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+}
+
+// revert grey color for those children that have children themselves
+.Navigation-item.has-children > .Navigation-link {
+ color: #333;
+}
+
/**
* Nested navigation
*/
.Navigation .Navigation {
padding: 0;
}
-
-.Navigation-item > .Navigation > .Navigation-item > .Navigation-link {
- padding: 10px 24px 10px 46px;
- font-weight: 400;
-}
-
-.Navigation-item > .Navigation > .Navigation-item > .Navigation-link.active {
- font-weight: 500;
-}
diff --git a/components/navigation/index.js b/components/navigation/index.js
index ae748a713..7351d1eaa 100644
--- a/components/navigation/index.js
+++ b/components/navigation/index.js
@@ -33,7 +33,7 @@ class Item extends React.Component {
this.setState({
isOpen: !this.state.isOpen
})
- if (item.links && !subItem) {
+ if ((item.links && !subItem) || subItem && subItem.links) {
// simply open submenu without notifying parent or changing url
if (e) {
e.preventDefault()
@@ -46,7 +46,7 @@ class Item extends React.Component {
/**
* Update parent component and open submenu on initial render
*/
- componentWillMount () {
+ componentDidMount () {
if (this.props.location.pathname.includes(this.props.link)) {
this.onClick(this.props.item, this.props.subItem)
}
@@ -56,7 +56,9 @@ class Item extends React.Component {
const {index, link, text, onClick, links, item, subItem, location} = this.props
const {isOpen} = this.state
return (
-
+
{
links &&
-
+
{links.map((subItem, j) =>
- {
wrapper.find('.Navigation-overlay').simulate('click')
assert.equal(wrapper.find('.Navigation-overlay').hasClass('is-visible'), false)
})
+
+ it('should go multiple levels deep', () => {
+ const location = {pathname: '/cars/tesla/models-s/p100d', search: '', hash: ''}
+ const wrapper = mount(
+
+
+
+ )
+ assert(wrapper.find('a[href]="/cars/tesla/model-s/p100d"'))
+ })
})
diff --git a/examples/js/components/navigationRoute.js b/examples/js/components/navigationRoute.js
index 83548c94b..d8c8efd68 100644
--- a/examples/js/components/navigationRoute.js
+++ b/examples/js/components/navigationRoute.js
@@ -9,11 +9,30 @@ const defaultNavigation =
@@ -31,7 +50,7 @@ export default class NavigationRoute extends React.Component {
The navigation component is visible on large devices. It is automatically hidden on small devices and a hamburger button is displayed, which shows it on click.
- The max. level of nesting is currently two. You can have a main menu and each menu item can have multiple sub menu items.
+ You can add as many sub menues as you like. There is not limit since sub menues simply call themselves when they have links. However sub menues do not have extra paddings and are aligned like their parent. Going mutiple levels deep might confuse the user.