# @bapana/react-sidebar

> Custom modern sidebar for react applications

Latest version **1.3.3** (published 2021-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bapana/react-sidebar
pnpm add @bapana/react-sidebar
yarn add @bapana/react-sidebar
bun add @bapana/react-sidebar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2021-01-04 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 5.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Parthiban Baskar |
| Maintainers | parthikrb |
| Keywords | react-sidebar, custom-sidebar, sidebar, react-sidenav, react-navigation, react-navbar |

## Links

- npm: https://www.npmjs.com/package/@bapana/react-sidebar
- Repository: https://github.com/parthikrb/react-sidebar
- Homepage: https://github.com/parthikrb/react-sidebar#readme
- Issues: https://github.com/parthikrb/react-sidebar/issues
- npm.io page: https://npm.io/package/@bapana/react-sidebar

## Dependencies (4)

- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [framer-motion](https://npm.io/package/framer-motion.md) ^3.1.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.4
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.0.0

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.3.3 (latest) — 2021-01-04
- 1.3.2 — 2021-01-02
- 1.3.1 — 2020-12-31
- 1.2.24 — 2020-12-31
- 1.2.23 — 2020-12-30
- 1.2.22 — 2020-12-30
- 1.2.21 — 2020-12-30
- 1.2.20 — 2020-12-29
- 1.2.19 — 2020-12-29
- 1.2.18 — 2020-12-29
- 1.2.17 — 2020-12-29
- 1.2.16 — 2020-12-29
- 1.2.15 — 2020-12-29
- 1.2.14 — 2020-12-28
- 1.2.13 — 2020-12-28
- … 17 more at https://npm.io/package/@bapana/react-sidebar/versions

## README

# @bapana/react-sidebar

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

[![NPM](https://img.shields.io/npm/v/@bapana/react-sidebar.svg)](https://www.npmjs.com/package/@bapana/react-sidebar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @bapana/react-sidebar
```

## Usage

```jsx
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

```js
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](https://github.com/parthikrb)

---
_Source: https://npm.io/package/@bapana/react-sidebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._