@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'
    }
  }

License

MIT © Parthiban Baskar