Usage

Package Overview:-

This Package enables users to add Animated Side Navigation Bar to their existing React Project. The Navigation bar serves following features.

• Responsive Side Navigation Bar catering to different Screens and Media queries.
• Animated Side Navigation Bar which can be controlled using inbuilt Toggle Button.
• React Routing for the Navigation Links Working out of the box.
• The Width of the Side Navigtion Bar can be controlled from fullscreen (100vw) to Industry Standard Side Navigation Drawer Width.
• Provision to Configure One level Deep Nested Navigation links.
• Provision to Add User Profile Information like Name and Email address in the Navigation Drawer.
• Basic Look and feel of the Navigation Bar (Primary Color, Secondary Color, Navigation Bar Width, Toggle Button Color ) can be configured by passing appropriate values to the Prop.
• LightWeight Css file to configure advanced Styling.

Demo.

Github Pages

Install.

npm install react-animated-variablewidth-sidenavbar-withrouting --save
yarn add react-animated-variablewidth-sidenavbar-withrouting

Usage (Minimal Setup)

• App.js

import React from "react";
import CreateSideBarNavLink from "react-animated-variablewidth-sidenavbar-withrouting";

const App = () => {
  const myData = {
    navBarSettings: {
      navBarWidth: "100vw",
      theme: {
        primaryColor: "rgb(0, 51, 153,0.5)",
        secondaryColor: "rgb(0, 85, 255)",
        toggleButtonColor: "rgb(0, 51, 153,1)",
      },
    },
    userInfo: {
      name: "aryan sharma",
      email: "[email protected]",
    },

    link1: {
      IconSet: (
        <i
          className="fa fa-fw fa-list"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),
      Text: "Products",
      Expandable: true,
      ExpandableIconset: (
        <i
          className="fas fa-angle-right angleIcon"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),

      Route: "/products",
      children: [
        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Product1",
          Expandable: false,
          children: null,
          Route: "/products/product1",
        },

        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Product2",
          Expandable: false,
          children: null,
          Route: "/products/product2",
        },
        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Product3",
          Expandable: false,
          children: null,
          Route: "/products/product3",
        },
        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Product4",
          Expandable: false,
          children: null,
          Route: "/products/product4",
        },
      ],
    },

    link2: {
      IconSet: (
        <i
          className="fa fa-fw fa-edit"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),
      Text: "Portfolio",
      Expandable: true,
      ExpandableIconset: (
        <i
          className="fas fa-angle-right angleIcon"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),

      Route: "/portfolio",
      children: [
        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Portfolio1",
          Expandable: false,
          children: null,
          Route: "/portfolio/portfolio1",
        },
      ],
    },

    link3: {
      IconSet: (
        <i
          className="fa fa-fw fa-bell"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),
      Text: "About",
      Expandable: false,
      ExpandableIconset: (
        <i
          className="fas fa-angle-right angleIcon"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),

      Route: "/about",
      children: null,
    },

    link4: {
      IconSet: (
        <i
          className="fa fa-fw fa-file"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),
      Text: "Catelogues",
      Expandable: true,
      ExpandableIconset: (
        <i
          className="fas fa-angle-right angleIcon"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),

      Route: "/catelogue",
      children: [
        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Catelogues1",
          Expandable: false,
          children: null,
          Route: "/catelogue/catelogue1",
        },

        {
          IconSet: (
            <i
              className="fas fa-gavel"
              style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
            ></i>
          ),
          Text: "Catelogues2",
          Expandable: false,
          children: null,
          Route: "/catelogue/catelogue2",
        },
      ],
    },
    link5: {
      IconSet: (
        <i
          className="fa fa-fw fa-list"
          style={{ fontSize: window.innerWidth > 768 ? "1vw" : "4vw" }}
        />
      ),
      Text: "Contact Us",
      Expandable: false,
      ExpandableIconset: (
        <i
          className="fas fa-angle-right angleIcon"
          style={{
            fontSize: window.innerWidth > 768 ? "1vw" : "4vw",
            color: "rgba(255,255,255,0.6)",
          }}
        />
      ),

      Route: "/contactus",
      children: null,
    },
  };

  return (
    <React.Fragment>
      <CreateSideBarNavLink myData={myData} />
    </React.Fragment>
  );
};

export default App;

• AppRoutes.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Home } from "./Home";
import { About } from "./About";
import { Product } from "./Product";
import { Portfolio } from "./Portfolio";
import { Catelogue } from "./Catelogue";
import { Contactus } from "./Contactus";
import { Catelogue1 } from "./Catelogue1";
import { Catelogue2 } from "./Catelogue2";
import { Product1 } from "./Product1";
import { Product2 } from "./Product2";
import { Product3 } from "./Product3";
import { Product4 } from "./Product4";
import { Portfolio1 } from "./Portfolio1";
import App from "./App";


class Approutes extends Component {
  render() {
    return (
      <BrowserRouter>
      <App/>
        <div>
          <Switch>
            <Route exact={true} strict path="/">
              <Home />
            </Route>
            <Route exact={true} strict path="/products">
              <Product />
            </Route>
            <Route exact={true} strict path="/about">
              <About />
            </Route>
            <Route exact={true} strict path="/portfolio">
              <Portfolio />
            </Route>
            <Route exact={true} strict path="/catelogue">
              <Catelogue />
            </Route>
            <Route exact={true} strict path="/contactus">
              <Contactus />
            </Route>
            <Route exact={true} strict path="/catelogue/catelogue1">
              <Catelogue1 />
            </Route>{" "}
            <Route exact={true} strict path="/catelogue/catelogue2">
              <Catelogue2 />
            </Route>
            <Route exact={true} strict path="/products/product1">
              <Product1 />
            </Route>
            <Route exact={true} strict path="/products/product2">
              <Product2 />
            </Route>
            <Route exact={true} strict path="/products/product3">
              <Product3 />
            </Route>
            <Route exact={true} strict path="/products/product4">
              <Product4 />
            </Route>
            <Route exact={true} strict path="/portfolio/portfolio1">
              <Portfolio1 />
            </Route>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default Approutes;

API

• You should pass One mandatory prop to the CreateSideBarNavLink Component.
• Following attributes can be controlled by passing appropriate values to the Javascript Object mydata as shown in above Code Snippet.
• All values discussed below are mandatory values against their respective keys

navBarSettings

Its a javascript object which is responsible to control the basic look and feel of the Side Navigation Drawer by passing the right values.

navBarWidth

Controls the Width of Side Navigation Drawer. Valid values ranges between 100vw Fullscreen to 20vw. Anything entered below 20vw defaults to 20vw.

theme

primaryColor:- Controls the Background Color of the Side Navigation Drawer. secondaryColor:- Controls the Background Color of the Children Link Drawer when expanded. toggleButtonColor:- Controls the Background Color of the Toggle Button.

userInfo

name:- Name of the Logged In User email:- Email of the Logged In User.

link1

Details of the First Navigation Link.

IconSet:- Icon FontAwesome Icon Supported Representing the First Parent Navigation Link. Text:- Text for the First Parent Navigation Link. String Expandable:- Whether Contains Nested Children Links Or Not Boolean ExpandableIconset- Valid when Expandable is set to true. Icon Representing the Expand/Collapse of the Children Link Drawer. Route:- This points to the url the user will be directed to when the link1 is clicked upon. Mapping between Url and Component should be configured by the user inside AppRoutes Components. See the github link for further help. Once mapping between component and url is configured in Approutes, the page will be redirected to the url and the corresponding component will be made visible. String children:- Array of Children Nested Links which are Part of Parent Link Link1. This should be supplied only when Expandable is set to true. Array IconSet, Text, Expandable, Children, Route parameters are same as above but this caters to the Children Links.

In Case You want to have support for n Parent Links, please provide link1, link2,...linkn configuration in the mydata Prop/object.

Setting Up the Development Environment.

• Install the package using npm install
• Provide Configuration for Side Navigation Drawer and Navigation Links as part of mydata object/Prop.
• Call the Component CreateSideBarNavLink by passing the Prop mydata to it. Suppose the name of the component is App.js
• App.js should be part of Approutes.js as shown above in the code snippet.
• Browse http://localhost:{portno} to see the changes.
• Click on TOGGLE Button to Expand the SIDE NAVIGATION DRAWER.
• Click Or Hover on Any Link which will Redirect to the Url and the Corresponding Page/Component will be made Visible.

Caveats

There is an existing npm react routing bug which you might encounter while using this package Error: Invariant failed: You should not use NavLink outside a Router. To circumvent the error, Please make sure your Project (where you are installing this package) has following webpack.config.

Link to NPM REACT-ROUTING BUG

Webpack.config.js
module.exports = () => {
  return (
    entry:{...}
    module: {...},

    resolve: {
      alias: {
        react: path.resolve(__dirname, './node_modules/react'),
        'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
        'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom')
      }
  )
  }

Reporting Issues

Feel Free to Open a PR in the Github link.

License

MIT

Keywords

react-sidenavbar animated-sidenavbar react-animated-fullscreen-sidenavbar navigation-bar navigation react-navigation sidenav sidenavigationbar nav drawer navigation-drawer fullscreen sticky-sidebar panelbar navbar slidebar