react-custom-sidenav

A library of React components created using create-react-app and material-ui.

Installation

Run the following command: npm install react-custom-sidenav

How to use

import React from "react";
import { SideNav } from "../lib";
import { Router, Route,Switch } from "react-router-dom";
import { createBrowserHistory } from 'history';
import Grid from '@material-ui/core/Grid';
import CssBaseline from '@material-ui/core/CssBaseline';

const history = createBrowserHistory();
class App extends  React.Component{

  render() {
      return(
        <Router  history={history}>

            <Grid container spacing={3}>
                <Grid item xs={12}>
                  <SideNav title="Custom Navbar"
                  menulinks={[{"name":"Home","icon":"fa fa-plus-circle fa-4","linkurl":"/home"},
                  {"name":"About","icon":"fa fa-info-circle fa-4","linkurl":"/about"},{"name":"Users","icon":"fa fa-user-circle fa-4","linkurl":"/users"}]} 
                  logo={{width:"50px",height:"50px",image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTu7bYh95wcxKFLdLPI_wj55K1EKvLbhaz4dWxfoxw7AVjdaYKC",alt:"Brand"}}
                  appbar={{bgcolor:"primary"}}
                  history={history}
                  />
                  </Grid>
                  <Grid item xs={10} style={{ marginLeft: 100 }}>
                  <CssBaseline />
                      <Switch>
                        <Route exact path="/home" component={Home} />
                        <Route exact path="/about" component={About} />
                        <Route exact path="/users" component={Users} />
                      </Switch>                  

                </Grid>
              </Grid>      
            </Router>
      )
  }
};
function Home(params) {
  return(
    <div>
      <h1>Home</h1>
      <p>This is a home page</p>

      </p>
    </div>
  )

} 
function About(params) {
  return(
    <div>
      <h1>About</h1>
      <p>This is an about page</p>

      </p>  
    </div>
  )

} 
function Users(params) {
  return(
    <div>
      <h1>Users</h1>
      <p>This is users page</p>
      </p>
    </div>
  )

} 

export default App

Required information

Command	Description	Required
history	Used for dynamic routing	Yes
menulink	Used for side navbar list items	Yes
appbar.bgcolor	Used for top app bar color(Primary,Secondary,Default)	No
menulink	Used for side navbar list items	Yes

history - Used for dynamic routing menulink - Used for side navbar list items

This library will take font awesome icons for side navbar icons.To render navbar list item Format given below as

{ "name":Name of the navbar list item, "icon":font awesome icon class, "linkurl":react router path

}

Logo will be placed dynamically with in navbar Format was given as

{
width:"50px",
height:"50px",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTu7bYh95wcxKFLdLPI_wj55K1EKvLbhaz4dWxfoxw7AVjdaYKC",
alt:"Brand"
}