I was wondering to add a sidebar to one of my project so first I searched if there are any already built components and I did't find any that I liked. So I decided to build one and after that I published it like a npm package in order other people to contribute and use it.
Here I will explain how to use it and I will be thankful if you give a star in github. There is a link to the repo at the bottom of the page.

Install

npm install --save react-sidebar-ui

Usage

import React from 'react'import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'import 'react-sidebar-ui/dist/index.css';const App = () => {  return (    <div>      <Sidebar bgColor='black' isCollapsed={false}>        <Logo          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'          imageName='react logo'/>        <LogoText>React Sidebar UI</LogoText>        <DropdownItem          values={['First', 'Second', 'Third']}          bgColor={'black'}>          Menu        </DropdownItem>        <Item bgColor='black'>          <Icon><i className="fas fa-home"/></Icon>          Home        </Item>        <Item bgColor='black'>          <Icon><i className="fas fa-info"/></Icon>          About        </Item>        <Item bgColor='black'>          <Icon><i className="fas fa-sitemap"/></Icon>          My Website        </Item>        <Item bgColor='black'>          <Icon><i className="far fa-address-book"/></Icon>          Contacts        </Item>        <Item bgColor='black'>          <Icon><i className="fas fa-rss-square"/></Icon>          Blog        </Item>        <InputItem type='text' placeholder={'Search...'}/>      </Sidebar>    </div>  )};

You should import FontAwesome in order to use the icons.

Props

Common props you may want to specify include:

Sidebar

• bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
• isCollapsed - add start position of the sidebar if it will be collapsed or not
• classes - add your custom classes if you want to add custom style to the component

DropdownItem

• bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
• values - items that will be displayed
• classes - add your custom classes if you want to add custom style to the component

Item

• bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
• classes - add your custom classes if you want to add custom style to the component

Logo

• image - url to the image
• imageText - alt tag of the image
• classes - add your custom classes if you want to add custom style to the component

InputItem

• type - type of the input field
• placeholder - placeholder of the input field
• classes - add your custom classes if you want to add custom style to the component

Contribute

Contributions are always welcome! Any moderation, feature/pull requests are welcome if you want to contribute!

npm install --save react-sidebar-ui

import React from 'react'import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'import 'react-sidebar-ui/dist/index.css'const App = () => {  return (    <div&gt      <Sidebar bgColor='black' isCollapsed={false}&gt        <Logo          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'          imageName='react logo'/&gt        <LogoText>React Sidebar UI</LogoText>        <DropdownItem          values={['First', 'Second', 'Third']}          bgColor={'black'}>          Menu        </DropdownItem>        <Item bgColor='black'>          <Icon><i className="fas fa-home"/></Icon>          Home        </Item>        <Item bgColor