CW Side Nav-Bar

A responsive React side-nav bar.

Table Content

1. Features
2. Intallation
3. Usage
4. Props

Features

• Responsive
• Easy to Use
• Customizable

Intallation

npm i test-sidenavpackage

Usage

import { CWMiniDrawer } from 'test-sidenavpackage';

Example

const menuList = [
  {
    id: 0,
    name: "Dashboard",
    icon: <DashboardIcon />,
    navigator: "/home/dasboard",
    expandSubmenu: false,
  },
  {
    id: 1,
    name: "Option 2",
    expandSubmenu: false,
    icon: <Icon2 />,
    navigator: "/home/option2",
    subMenu: [
      {
        name: "Sub Menu 1",
        icon: <SubMenu1 />,
        navigator: "/home/submenu1",
      },
      {
        name: "Sub Menu 2",
        icon: <SubMenu2 />,
        navigator: "/home/submenu2",
      },
    ],
  },
]
function App() {
  const onclickCallBack=(path:any)=>{
    console.log(path)// get Navigation path
  }
  return (
    <div className="App">
      <CWMiniDrawer menuList={menuList} onClickSelected={onclickCallBack}/>
    </div>
  );
}

export default App;

Props

• menuList
• onClickSelected

menuList

It contains array of objects list that you to want on Navigation Bar.

Example

{
    id: 0, // Unique Id
    name: "Dashboard", // Menu Name
    icon: <DashboardIcon />, // Icon for Menu
    navigator: "/home/dasboard", // path return on Click 
    expandSubmenu: false, // Menu Accordion Open or close
    subMenu: [ // Array or sub menu
      {
        name: "Sub Menu 1", //Name of sub menu
        icon: <SubMenu1 />, // Icon for sub menu
        navigator: "/home/submenu1", // path return on Click
      },
  },

onClickSelected

It is call back function it helps to receive return path.

Example

const onclickCallBack=(path:any)=>{
    console.log(path)// get Navigation path
  }