@bapana/react-sidebar NPM

@bapana/react-sidebar

Completely customizable modern sidebar built with light weight and modern libraries available in the market

Install

npm install --save @bapana/react-sidebar

Usage

import React from 'react'
// Sidebar Component
import Sidebar from '@bapana/react-sidebar'
import '@bapana/react-sidebar/lib/index.css'
// Icons for the menu and sub menu items
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faAddressBook,
  faAddressCard,
  faBookmark,
  faRetweet
} from '@fortawesome/free-solid-svg-icons'

const ExampleComponent = () => {
  const brandName = {
    name: 'Hello',
    logoPath: '/images/logo.png'
  }

  const menuList = [
    {
      name: 'Home',
      icon: <FontAwesomeIcon icon={faAddressBook} />,
      to: '/',
      hasChildren: false,
      subMenu: []
    },
    {
      name: 'Dashboard',
      icon: <FontAwesomeIcon icon={faAddressCard} />,
      to: '/dashboard',
      hasChildren: true,
      subMenu: [
        {
          name: 'Board',
          icon: <FontAwesomeIcon icon={faBookmark} />,
          to: '/board'
        },
        {
          name: 'Report',
          icon: <FontAwesomeIcon icon={faRetweet} />,
          to: '/report'
        }
      ]
    }
  ]

  return <Sidebar brandName={brandName} menuList={menuList} />
}

Styles Customization

Passing the theme property to Sidebar component as below will adopt the given color patterns

Key	Description
header	Sidebar Header color code
menuItem	Menu items color code
expandArrow	Menu expand arrow color code
toggle	Toggle arrow color code
sidebar	Sidebar color code

below is the default color code

theme: {
    header: {
      color: '#bdc3c7',
      hoverColor: '#ecf0f1',
      backgroundColor: '#222f3e'
    },
    menuItem: {
      color: '#bdc3c7',
      hoverColor: '#ecf0f1',
      active: '#1abc9c',
      activeHoverColor: '#1dd1a1'
    },
    expandArrow: {
      color: '#ecf0f1'
    },
    toggle: {
      color: '#bdc3c7',
      hoverColor: '#ecf0f1'
    },
    sidebar: {
      backgroundColor: '#222f3e',
      color: '#bdc3c7'
    }
  }