wmira / react-sidenav

React based Sidebar Navigation

react-sidenav

Side Navigation Component for React

Requirements

react-sidenav are exported as an es module thus you would need a bundler to use it. It is also written in Typescript so it can be directly used with a typescript project as well.

Peer Dependencies

React 16.8

NavContext

As the current version of react-sidenav does not have any fixed rendering template, the user is free to render Nav items as they see fit. To render conditionally an item can get the context which contains the following attributes:

property	type	description
selected	boolean	if this Nav item is selected
id	string	the id of the Nav as per props.id
pathId	string	The path id, will be parentId
level	number	The level of the Nav, starts with 1
isLeaf	boolean	If true, then this Nav has no children

Below is an example on how to use it.

    const Item = () => {
      const context = React.useContext(NavContext);
      return (
        <div style={{ color: context.selected? 'pink': 'inherit'}}>{ props.children }</div>
      )
    }
  
    <SideNav>
      <Nav id="1">
        <Item>Link 1</Item>
      </Nav>
      <Nav id="2">
        <Item>Link 2</Item>
      </Nav>
      <Nav id="3">
        <Item>Link 3</Item>
      </Nav>
    </SideNav>
  

SideNav Properties

property	type	description	isRequired
onSelection	function: ({id, path, payload}) => void	a function that gets called when a navigation has been clicked	false
defaultSelectedPath	string	the default selection	false
mode	compact, normal	changes rendering style of children	false, defaults to normal
childrenToggleMode	hover, click	changes how children are expanded	false, defaults to hover
childrenToggleIndicator	React Component	the toggle indicator to render. The collapse, expand state is passed or you can use the NavGroupContext to get the collapse/expand state	false

Nav Properties

property	type	description	isRequired
id		a function that gets called when a navigation has been clicked	true
payload	any	passed to the listener when this nav is clicked	false

Development

Please checkout example on CodeSandbox and the src/playground directory for now while all the documentation/testing is being completed.

Sponsors

react-sidenav's Issues

@typescript/react-sidenav using with typescript need help to embed it in my application

Hi wmira ,

I am using typescript and trying to import react-sidenav in my application and its giving me error of cannot find module. I have added it in package.json and ran npm install --save too. Can you help me how can we use this in typescript.

Great job. Thanks for the help!

Suggestion: Have a search bar on the left nav

I think this is just a nice to have feature if we can have a search bar on the sidenav too.

withRR4 does not highlight a nav item on initial render

Set route path as props on NavItem

Now the withRR4 feature builds the path by looking at your nav item IDs. This is not a good solution as you're not always building your paths the same way as your nav tree. This should be able to be set by a prop on the <Nav> component

<Nav id='dashboard' to='/app/dashboard'>

expand sub menu on mouseover

How can I have a sub menu expand when I mouseover a menu item (instead of having to click on it) ?
I need to duplicate bootstrap menu behavior

Nice module, any plans to support server side rendering ?

I've got this error when running with server side react:

[0] /opt/.../node_modules/react-sidenav/dist/react-sidenav.js:550
[0]             return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
[0]                                        ^
[0] 
[0] ReferenceError: window is not defined

‘withRR4’ not working on latest version (3.1.3)

When I got the latest version (3.1.3) of the control, the React Router functionality no longer seems to work.

I forked the original version from the readme (original version)

Updated the react-sidenav dependency to 3.1.3 and changed the RR4 import in the AppNavigation.js file to

import { withRR4 } from "react-sidenav/withRR4";

forked version like the previous bug mentioned.

There was also a bug in the (original sandbox version). If you click on the "Home" button (the route that has an exact path), the body section goes blank.

Is this currently working?

I cant get this to work and on the demo page it doesnt look like its working. In the package.json it looks like its trying to call a lib/index file but there isnt a lib directory, and if you change it to src to point it to the index file there then it looks like its an issue with the es6.

Create a Children Template Renderer for compact scheme

Write a new children template renderer such that an element with children on compact scheme are able to render the children as an overlay element as opposed to expanding the the sidenavigation in default scheme.

How to select without defaultSelected

trying to select the items when there is no default selected. I dont want one initially selected, but I still want to be able to select. Is this possible?

Warnings in console

Hi,

I have a lot of warnings in my console and I don't know why

Here is a screenshot

I'm using the lastest version of react-sidenav (3.1.5), and I already tried to reinstall node_modules

Do you have any how to fix the issue ?

Thank you in advance for your answers !

defaultSelected with sub menu

Given

import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
...

<SideNav defaultSelected={'mySubMenu'} >
  <Nav id='config'>
    <NavText>Configuration</NavText>
    <Nav id='mySubMenu'>
      <NavText><RouterRingLink to="/admin/mySubAdmin"> My Sub Menu</RouterRingLink></NavText>
    </Nav>
  </Nav>
</SideNav>)

The "mySubMenu" is not selected-- how does one get the sub menu to expand and select the right node?

I've tried 'config/mySubMenu' as the value to defaultSelected and that didn't seem to work.

Create integration with RR4

Have this automatically integrate with RR4 preferably via a higher order component

`
import { withRR4 } from 'react-sidenav';

//this SideNav component would auto highlight items based on current path and change route if items //where selected/clicked
const SideNav = withRR4(..someoptions);

`

provide a defaultSelectionPath property to make SideNav an uncontrolled component

Nested items (submenus)?

The screenshot shows submenus, i.e. items nested under other items. Where are there instructions or examples of this?

Thank you.

Apply new styles usin styled-components

Hey,
I'm trying to apply new styles to the NavIcon element
`import styled from 'styled-components';

const StyledNavIcon = styled(NavIcon)width: 30px;;`

But when I use the new element I'm unable to see the child elements
<StyledNavIcon><FontAwesome name="th" size="x2" /></StyledNavIcon>

Any insight ?

Thank you

add 'undefined' to path when id not setted

Used withRR4 and subnavigations with full path.

SideNav component should have a "hoverColor" property too.

Hi,

Because hoverBgColor property is accepted then a "hoverColor" property should exist too.

[not a bug]Any way to use it without npm?

my webpage is structured with no npm at all...just some cdnjs scripts.
any way to import that sidenav ? seems perfect for my needs

Thanks ! i really appreciate the work done here

Not working with react-hot-loader

React-sidenav is not working with react-hot-loader (version 4.3.1).
There are blank Navs whenever you try to import react-hot-loader into the project.

Changes made:
.babelrc
,"plugins": ["react-hot-loader/babel"]

package.json
"playground": "webpack-dev-server --hot --content-base playground ",
....
,"react-hot-loader": "4.3.1" (in "devDependencies" section)

index.js
import { hot } from 'react-hot-loader';

How would i alter the style?

This might be a really dumb or nooby question.
But i would like to alter the style of the sidebar (darker color for expanded items)

How could i do something like this ?
Could it be possible to supply a custom class in the configuraton object ?

Thanks in advance for your time.

Improve docs about NavIcon and NavText

these should be marked as tagger elements and just used as a way to get icon and text elements as their children

Minified Action to show just icons

Hi
Is there a minify action to show just the icons?

Thanks

Allow to override the default onClick event

Hello,

Thanks for this great NavBar. I am just exploring the surface and I'm not using all the features, but looks very promising. Currently I am using it for anchor navigation (within the same page)
This not a big problem because I found a workaround ( one of many possible) however, it would be cool if we discuss about it.

I am on the situation where, on a single menu all the elements shares the same selection callback logic except one. Having to write callback branching just for one element is a bit inconvenient. It would be awesome if particular elements could specify an specific selection callback that should override the one the whole navbar has.

My current workaround is to build TWO navbars, one after the other, that just look like one. I have disabled the selection highlight so the fact that are actually two navbars is not noticeable. Other workaround may be to check the id on the callback and act differently depending on it.

Many thanks, and regards

Will be back supporting react-sideNav

All,
Apologies for the lack of updates before. I should be now back supporting this library fully.There are still a few bits needed to be documented but the internals is in the way where I wanted it to be to add more features in the future.

The 3.x is not fully backwards compat but will ensure it has much better quality than the previous react-sidenav releases.

Route path with RR4 not working properly

Am using the Side nav with RR4 and have child under Nav as below

Author Hello

No when i go the child page i.e. authorchild, the url is displayed as

http://localhost:3000/author/author/authorchild

Not sure why it is appending author again in the URL.

Appreciate your help!

Documentation says to use --save-dev

Documentation say to install with:

npm install --save-dev react-sidenav

I think it's a typo... An average user should use --save.

Looks cool...

Online demo please? :) Would love to add to react.rocks.

rawgit can be a good way to host demos without too much work...

Uncaught TypeError: _styledComponents2.default.div is not a function react-sidenav

hi, i get this error after trying to install it.

it seems to be something around the styled-components plugin (which needs to be version 2).

however, we are using babel-plugin-styled-components which the latest version is 1.1.7

Remove the mixin and add an Item component

Add a new Item component to be used to render nav items.

How to close the dropdown after a child element is clicked

Is there any way to force close the dropdown when a child nav item is selected? I prefer not to use jquery

<Nav id="customers">
            <NavIcon><SvgIcon icon={ic_account_circle} /></NavIcon>
            <NavText> {props.devs.changed_role === null ? props.devs.default_role : props.devs.changed_role} </NavText>
            <Nav id="dashboard2"  onNavClick={() => [store.dispatch({type: 'CHANGE_USER', payload: 'AU'}), store.dispatch(changeUserRole('Australia'))]}>
                <NavIcon><SvgIcon size={16} icon={ic_show_chart} /></NavIcon>
                <NavText> AU </NavText>
            </Nav>
 </Nav>

setting div height for sidenav to 100% doesn't set it to screen size

setting the div height to 100% doesn't set it to screen size, but 100% on width does.

App.js
const NavBar = () =>

Merchant Info


Loyalty Rewards

<div style={{height:'800px'}}/>

Logout

class App extends Component {
render() {
return (
<div className="SideNavDiv" style={{background:'#f78f4a', color:'#fff'}}>


);
}
}

App.css
.SideNavDiv {
height: 100%;
width: 100%;
}

Nav does not seem to support a style prop

I want to set a border and an "active" border to the Nav component. Is that possible at the moment?

The Icon of nested navigation items is not displayed.

Hi there,

The Icon of nested navigation items does not seem to be displayed.

For example, in the following snippet, the nested phone icon is not displayed, while the "parent" icon is:

<SideNav>
    <Nav id={'services'}>
        <NavIcon><FontIcon className="material-icons">view_comfy</FontIcon></NavIcon>
        <NavText> Services </NavText>

        <Nav id={'phoneService'}>
            <NavIcon><FontIcon className="material-icons">phone</FontIcon></NavIcon>
            <NavText> Phone Service </NavText>
        </Nav>
    </Nav>

</SideNav>

withRR4 onHistoryChange doesn't seem to get invoked

Using withRR4(), I sometimes navigate using this.props.history.push("/location"). However, the highlighted item in the sidebar doesn't change. Is there something extra that I need to do?

Missing `withRR4` on latest version

Hello,

I am not sure if there is some other way to use the integration of React Router but following the readme did not work 🙃

What's happening

The withRR4 hoc is missing on latest release

Steps to reproduce

import { withRR4 } from "react-sidenav";

const SideNav = withRR4();

// error --> (0 , _reactSidenav.withRR4) is not a function

Sandbox where the issue is presented

Here is a forked version from the readme (original version)
Forked version here

The readme's version seems to be using 3.0.9

Version

• React-sidenav: 3.1.1

how does it work with react-router?

Hello, I am trying to use your library and I am confused how the react-router works with this library here. By looking at your example code (App.js), it seems that you are using MemoryRouter as Router.

However, I am using something else (at least not MemoryRouter!) but I couldn't get it working by picking up the routing path and navigate to the page I want to go to.

import React from "react";

import { AppNavigation } from "./AppNavigation";
import { MemoryRouter as Router, Route, Switch } from "react-router-dom";

import { AppContainer, Navigation, Body, Title } from "./containers";

import { Home } from "./Home";
import { Basic } from "./Basic";
import { RenderItems } from "./RenderItems";
import { RenderItems2 } from "./RenderItems2";

class App extends React.Component {
  render() {
    return (
      <AppContainer>
        <Navigation>
          <Title> React SideNav </Title>
          <AppNavigation />
        </Navigation>
        <Body>
          <Switch>
            <Route path="//basic" component={Basic} />
            <Route path="//renderitems" component={RenderItems} />
            <Route path="//renderitems2" component={RenderItems2} />
            <Route path="/" exact component={Home} />
          </Switch>
        </Body>
      </AppContainer>
    );
  }
}

export const createApp = () => {
  return class SideNavApp extends React.Component {
    render() {
      return (
        <Router>
          <App />
        </Router>
      );
    }
  };
};

I have tried to use the id to match with the routing path but it is not picking up correctly.

<SideNav defaultSelectedPath={"home"}>
        <Nav id="home">
          <NavIcon>
            <Icon icon={home} />
          </NavIcon>
          <Text>Home</Text>
        </Nav>

So, I would like to know how does the id links to the react router path? See above, the id is "home", as the path is specified as "/"??? I am confused.

I realy like your module! But is there a way to link to other pages?

I tried wrapping the a tag around the Nav , but no good. Am i missing a obvious step for linking to other pages?

Left Padding Example

Hello @wmira - I was going through the CodeSandbox and ran across this example:
https://codesandbox.io/s/1r9l3n49mq

This was done in a earlier released version of your solution. Is it sill possible to add the left padding on select?

Uncaught TypeError: Cannot read property 'PropTypes' of undefined

Hi, I'm new to React, I downloaded react-sidenav and installed in my local machine.

Build is passing, but I'm seeing this error in my Chrome console,

Can you help me to fix this issue.

Thanks

fix enzyme unit test

content

Where should I place the rest of my content?

Nav item at the bottom off the sidenav

I'm trying to put a nav item like 'log out' at the very bottom of the side nav. I currently have it in a div with height set to 100vh so it takes up the whole screen. I want logout at the very bottom left.

Need help to embed react-sidenav into my Application

I am new to React so having real difficulty.
I am trying to embed react-sidenav playground into my application.
Using react-sidenav from --
https://github.com/wmira/react-sidenav

I am using its playground application to embed into following boiler plate
https://github.com/erikras/react-redux-universal-hot-example
I added a new Tab on the application called NavSideBarContainter
and invoking NavSideBar component

I tried to convert playground a NavSideBar component

Now I created a NavSideBar Container and trying to render NavSideBar componet

import React, { Component } from 'react';
// import Helmet from 'react-helmet';
import { NavSideBar } from 'components';
// import {connect} from 'react-redux';

export default class NavSideBarContainter extends Component {
static propTypes = {
children: React.PropTypes.object
};
constructor(props) {
super(props);
}
render() {
// const {children} = this.props;
return (

);
}
}

I am always getting this exception
SvgIcon.js:52 Uncaught (in promise) TypeError: Cannot read property 'children' of undefined
at new SvgIcon (SvgIcon.js:52)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:148)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)

Not sure how to define properties children.
My thinking was to create Panel as Component and dock it with following application.

Please help.

onItemSelection not invoked

"react": "^15.6.1",
"react-router": "4.1.1",
"react-sidenav": "^2.1.2"

const SideNav = withRR4()

     <SideNav
           highlightColor='rgb(255,255,255)'
           highlightBgColor='rgb(46,40,47)'
           hoverBgColor='rgb(118,118,118)'
           hoverColor='rgb(255,255,255)'
           onItemSelection={(id, parent) => console.log('clicked')}
           defaultSelected={locationName}>
           <Nav ...

Unfold top level nav based on path

Hi, is it possible to show the sub nav item based on the path? If i got to URL/x, the 'x' nav item is highlighted, but if i go to URL/x/y then i can't see the 'y' sub nav item, because 'x' is not unfolded. Thank you

Cool module! But is there a way to link to other pages

CSS in picture on main page

Where is the CSS to make the sidenav look like the example picture you have on the main page?

By default it does not look like that. Mostly I need the indentations for the elements contained inside the dropdown menu.

nested menus more than 2 levels

Hi,

I am trying to have more than 2 levels of nested/ sub menus . I couldn't get it to work.
Is this designed to handle it? Am I missing something?

toggle

i am not able to add toggle to show or hide this sidenav,is it possible yet?