diff --git a/README.md b/README.md index 48cb3ea..005faf9 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,6 @@ active | boolean | false | Highlight the navigation item as active. disabled | boolean | false | Disable the navigation item, making it unselectable. expanded | boolean | false | Whether the navigation item is expanded or collapsed. eventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item. -href | string | | HTML `href` attribute corresponding to `a.href`. onClick | function(event) | | Callback fired when the navigation item is clicked. onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected. diff --git a/examples/Styled/StyledSideNav.jsx b/examples/Styled/StyledSideNav.jsx index d3902dd..4693ddf 100644 --- a/examples/Styled/StyledSideNav.jsx +++ b/examples/Styled/StyledSideNav.jsx @@ -28,20 +28,20 @@ const StyledNav = styled(Nav)` [class*="sidenav-subnav--"] { > [class*="sidenav-subnavitem--"], > [class*="sidenav-subnavitem--"]:hover { - > a { + > [class*="navitem--"] { color: #222; } } > [class*="sidenav-subnavitem--"]:hover { - > a { + > [class*="navitem--"] { background-color: #eee; } } > [class*="sidenav-subnavitem--"][class*="selected--"] { - > a { + > [class*="navitem--"] { color: #db3d44; } - > a::before { + > [class*="navitem--"]::before { border-left: 2px solid #db3d44; } } @@ -49,20 +49,20 @@ const StyledNav = styled(Nav)` } && > [class*="sidenav-navitem--"] { - > a { + > [class*="navitem--"] { background-color: inherit; color: #222; } } && > [class*="sidenav-navitem--"]:hover { - > a { + > [class*="navitem--"] { background-color: #eee; } } && > [class*="sidenav-navitem--"], && > [class*="sidenav-navitem--"]:hover { - > a { - [class*="sidenav-nav-icon--"] { + > [class*="navitem--"] { + [class*="navicon--"] { &, > * { color: #666; } @@ -77,9 +77,9 @@ const StyledNav = styled(Nav)` && > [class*="sidenav-navitem--"][class*="highlighted--"], && > [class*="sidenav-navitem--"][class*="highlighted--"]:hover { - > a { - [class*="sidenav-nav-icon--"], - [class*="sidenav-nav-text--"] { + > [class*="navitem--"] { + [class*="navicon--"], + [class*="navtext--"] { &, > * { color: #db3d44; } diff --git a/src/NavItem.jsx b/src/NavItem.jsx index f617cf0..e95338a 100644 --- a/src/NavItem.jsx +++ b/src/NavItem.jsx @@ -1,4 +1,4 @@ -import Anchor from '@trendmicro/react-anchor'; +/* eslint jsx-a11y/click-events-have-key-events: 0 */ import chainedFunction from 'chained-function'; import cx from 'classnames'; import PropTypes from 'prop-types'; @@ -33,9 +33,6 @@ class NavItem extends PureComponent { // Value passed to the `onSelect` handler, useful for identifying the selected navigation item. eventKey: PropTypes.any, - // HTML `href` attribute corresponding to `a.href`. - href: PropTypes.string, - // Callback fired when the navigation item is clicked. onClick: PropTypes.func, @@ -71,14 +68,11 @@ class NavItem extends PureComponent { handleSelect = (event) => { const { - href, disabled, onSelect, eventKey + disabled, onSelect, eventKey } = this.props; - if (!href || disabled) { - event.preventDefault(); - } - if (disabled) { + event.preventDefault(); return; } @@ -126,8 +120,9 @@ class NavItem extends PureComponent { })} style={style} > - -
+
{navIcon && navIcon.props ? navIcon.props.children : null}
-
+
{navText && navText.props ? navText.props.children : null}
- +
); } @@ -191,8 +186,9 @@ class NavItem extends PureComponent { })} style={style} > - -
+
{navIcon && navIcon.props ? navIcon.props.children : null}
-
+
{navText && navText.props ? navText.props.children : null}
- - {others} + {others} +
{(navItems.length > 0) &&
.sidenav-navitem { - .sidenav-nav-icon + .sidenav-nav-text { + .navicon + .navtext { display: inline-block; } } .sidenav-nav > .sidenav-navitem { - &.expandable > a { + &.expandable > .navitem { cursor: pointer; } } @@ -60,11 +60,11 @@ z-index: -1; } - &.selected > a { + &.selected > .navitem { color: #fff; } - &.selected > a::before { + &.selected > .navitem::before { content: " "; width: 2px; height: 20px; @@ -74,12 +74,12 @@ border-left: 2px #ffffff solid; } - &:hover > a { + &:hover > .navitem { background: transparent; color: #fff; } - > a { + > .navitem { color: #f9dcdd; padding: 0 14px 0 20px; line-height: 28px; diff --git a/src/sidenav-navitem.styl b/src/sidenav-navitem.styl index 49e2aa1..494d615 100644 --- a/src/sidenav-navitem.styl +++ b/src/sidenav-navitem.styl @@ -2,46 +2,46 @@ clear: both; position: relative; - &.highlighted > a { + &.highlighted > .navitem { cursor: default; } - &:hover > a::after { + &:hover > .navitem::after { background: #fff; opacity: .15; } - &.highlighted > a::after, - &:hover.highlighted > a::after { + &.highlighted > .navitem::after, + &:hover.highlighted > .navitem::after { background: #000; opacity: .2; } - &.highlighted.expanded > a::after, - &:hover.highlighted.expanded > a::after { + &.highlighted.expanded > .navitem::after, + &:hover.highlighted.expanded > .navitem::after { background: #000; opacity: .25; } - &.highlighted.selected.expanded > a::after, - &:hover.highlighted.selected.expanded > a::after { + &.highlighted.selected.expanded > .navitem::after, + &:hover.highlighted.selected.expanded > .navitem::after { background: #000; opacity: .2; } - &:hover > a .sidenav-nav-icon, - &.highlighted > a .sidenav-nav-icon { + &:hover > .navitem .navicon, + &.highlighted > .navitem .navicon { opacity: 1; } - &:hover > a .sidenav-nav-icon, - &:hover > a .sidenav-nav-text, - &.highlighted > a .sidenav-nav-icon, - &.highlighted > a .sidenav-nav-text { + &:hover > .navitem .navicon, + &:hover > .navitem .navtext, + &.highlighted > .navitem .navicon, + &.highlighted > .navitem .navtext { color: #fff; } - > a { + > .navitem { position: relative; display: block; line-height: 50px; @@ -50,6 +50,11 @@ text-decoration: none; color: #fff; font-size: 14px; + cursor: pointer; + + &:focus { + outline: 0; + } // Background layer &::after { @@ -65,7 +70,7 @@ } } - > a .sidenav-nav-icon { + > .navitem .navicon { display: block; float: left; width: 64px; @@ -84,7 +89,7 @@ color: #f9dcdd; } } - > a .sidenav-nav-icon + .sidenav-nav-text { + > .navitem .navicon + .navtext { display: none; } } diff --git a/src/sidenav-subnavitem.styl b/src/sidenav-subnavitem.styl index 543a21d..1e8c81f 100644 --- a/src/sidenav-subnavitem.styl +++ b/src/sidenav-subnavitem.styl @@ -15,19 +15,24 @@ margin-bottom: 8px; } - &.selected > a { + &.selected > .navitem { color: #db3d44; font-weight: bold; background: none; cursor: default; } - > a { + > .navitem { display: block; text-decoration: none; color: #222; font-size: 13px; line-height: 30px; padding: 0 24px; + cursor: pointer; + + &:focus { + outline: 0; + } } }