React ItraSideNav

React side navigation component, It has list of options [See Options List Section] that can be selected based on requirement. ItraSideNav can also handle dynamic data very well.

Demo

Live Demo URL : http://demo.techhysahil.com/react-ItraSideNav/

Getting Started

The easiest way to use React ItraSideNav is to install it using NPM.

npm install react-itra-sidenav --save

Now import React ItraSideNav into your project.

import ItraSideNav from 'react-itra-sidenav';

// Be sure to include styles at some point
import 'react-multi-select/dist/font/icons.css';
import 'react-multi-select/dist/react-ItraSideNav.min.css';

Usage

After adding react-itra-sidenav into your project, just add below tag into your templete.

let dataSource = [
        {
            displayText : "Overview",
            linkValue : "http://test.analytics.mn/overview.jsp",
            iconClass : "icon icon_Icon_AnalyticsInterface-20",
            isOpen : false,
            isActive : true,
            isDisable : false
        },
        {
            displayText : "Reports",
            linkValue : null,
            iconClass : "icon icon_Icon_AnalyticsInterface-32",
            isOpen : false,
            isActive : false,
            isDisable : false,
            nestedNavgation : [
                {
                    displayText : "Analyse",
                    linkValue : "/analyse",
                    iconClass : "fa fa-minus",
                    isActive : false,
                    isDisable : false
                },
                {
                    displayText : "Saved",
                    linkValue : "/report",
                    iconClass : "fa fa-minus",
                    isActive : false,
                    isDisable : false                        }
            ]
        },
        {
            displayText : "Team Specs",
            linkValue : "/team-specs",
            iconClass : "icon icon_Icon_AnalyticsInterface-19",
            isOpen : false,
            isActive : true,
            isDisable : false
        },
        {
            displayText : "User Specs",
            linkValue : "/user-specs",
            iconClass : "icon icon_Icon_AnalyticsInterface-30",
            isOpen : false,
            isActive : true,
            isDisable : false
        }
    ];

<ItraSideNav 
  dataSource = {dataSource}
  leftnavToggle = {this.leftnavToggle} 
/>

ItraSideNav Options

OPtion	Required/Optional	Description
dataSource	Required	Contains list of naviagation item. It can be nested navigation too.
isCollapsed	Optional	Defines weather ItraSideNav will be collapsed or not

Navigation Item Options

OPtion	Required/Optional	Description
displayText	Required	Text that needs to be displayed
linkValue	Required	Relative link for react js app with respect to base url & Absolute url for external links
iconClass	Required	class of left icon
isOpen	Required	state of nested nav by default
isActive	Required	Active navigation item by default
isDisable	Required	Disable Navigation item
nestedNavgation	Required	Array of Nested item

Events

OPtion	Required/Optional	Description
leftnavToggle	Required	Emit state of isCollapsed

Authors

*Sahil Gupta Github

License

This project is licensed under the Custom License - see the LICENSE.md file for details