think-to-do-toolbar

Toolbar component for website

Install

npm install --save think-to-do-toolbar

Usage

import React from 'react'

import ThinkToDoToolbar from 'think-to-do-toolbar'
import 'think-to-do-toolbar/dist/index.css'
const menus = [
  {
    name: 'Sign in',
    url: '/sign-in'
  },
  {
    name: 'My account',
    url: '/sign-in'
  },
  {
    name: 'Check out',
    url: '/check-out'
  },
  {
    name: 'Compare',
    url: '/compare'
  }
]
const search = (value) => {
  console.log('You are searching: ' + value)
}
const clickToggleBar = () => {
  console.log('Implement when click on toggle bar icon on mobile screen')
}
const App = () => {
  return (
    <ThinkToDoToolbar
      logo='https://pagebuilder.apollotheme.com/leo_beautique_demo/img/leo-beautique-logo-1585129254.jpg'
      search={search}
      clickToggleBar={clickToggleBar} // Implement when click on toggle bar icon on mobile screen
      cart={10}
      heart={5}
      dropDownMenus={menus} // Dropdown menu when you hover on account icon
      color={'#eb8092'} // Search button color
      bgColor={'#ffffff'} // Background color
    />
  )
}

export default App

License

MIT © thinktodo-dev