masspa-toolbar

Toolbar component for website

Install

npm install --save masspa-toolbar

Usage

import React from 'react'
import MasspaToolbar from 'masspa-toolbar'
import 'masspa-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) => {
  alert('You are searching: ' + value)
}
const clickToggleBar = () => {
  alert('Implement when click on toggle bar icon on mobile screen')
}
const onClickCart = () => {
  alert('Implement when click on cart icon')
}
const App = () => {
  return (
    <MasspaToolbar
      logo='https://pagebuilder.apollotheme.com/leo_beautique_demo/img/leo-beautique-logo-1585129254.jpg'
      hideLogoOnMobile={true} // Show or hide logo on mobile screen
      cart={10} // Value on cart icon
      heart={5} // Value on heart icon
      dropDownMenus={menus}
      color={'#ff6a00'} // color input button
      bgColor={'#ffffff'}
      onClickCart={onClickCart} //Implement when click on cart icon
      clickToggleBar={clickToggleBar} // Implement when click on toggle bar icon on mobile screen
      search={search} // Implement search
    />
  )
}

export default App

License

MIT © thinktodo-dev