bubble-sidebar (React)

A creative component named BubbleSidebar.

Idea from

https://dribbble.com/shots/6094093-Dashboard-sidemenu-exploration

Website

https://creative-components.github.io/bubble-sidebar/

Screenshot | Demo

https://codepen.io/g1eny0ung/pen/JzvvzE

How to use

npm i creative-cp-bubble-sidebar --save
// or
yarn add creative-cp-bubble-sidebar

Docs

import

// ES Modules
import BubbleSidebar from 'creative-cp-bubble-sidebar'
// CSS
import 'node_modules/creative-cp-bubble-sidebar/style/BubbleSidebar.css'
// SCSS
import 'node_modules/creative-cp-bubble-sidebar/src/BubbleSidebar.scss'

// Common JS
const BubbleSidebar = require('creative-cp-bubble-sidebar')

For browser use:

<link
  rel="stylesheet"
  href="https://unpkg.com/creative-cp-bubble-sidebar/style/BubbleSidebar.css"
/>

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/creative-cp-bubble-sidebar"></script>

See ./docs/index.html for more details.

Props

defaultProps = {
  attached: false,
  width: 'normal',
  color: '#fff',
  background: '#000',
  sliderBackground: '#fff',
  activeIndex: 0,
  activeColor: '#000'
}

BubbleSidebar.attached

Tell BubbleSidebar is or not attach itself to container's left.

BubbleSidebar.width

BubbleSidebar's width.
Three options: thin, normal, wide

BubbleSidebar.color

BubbleSidebar CSS Style: color.

BubbleSidebar.background

BubbleSidebar CSS Style: background.

BubbleSidebar.sliderBackground

BubbleSidebar's slider CSS Style: background.

BubbleSidebar.activeIndex

Tell BubbleSidebar which index of item will render at first.

BubbleSidebar.activeColor

Active item color of BubbleSidebar.

BubbleSidebar.onClick

Click event of BubbleSidebar.

License

Distributed under the The MIT License (MIT).