open-index/open-npm huggingface dataset:
npm package: @placetopay/sidebar-menu
Description: A configurable sidebar menu in many projects
Author: Roberto Jimenez P
Latest version: 1.0.2

# Sidebar Menu

is a component that can be reused in different Vue projects with configurable properties and tailwind styles

## :hammer: Server requirements

- Node.js >= 14.0
- Vue.js 2.6
- Sass >= 1.32.0
- Vuex >= 3.0.0
- make sure you have a sass compiler either Webpack, Laravel-mix, Vite or Rollup

## :pushpin:  Installation

```bash
# git clone
git clone git@bitbucket.org:placetopay/sidebar-menu.git

For development

npm install
npm run dev 

Build package 

npm run build
```



## :pushpin: Plugin installation

```bash
# install via npm
npm i @placetopay/sidebar-menu
```

## :books: Plugin usage

```javascript 
// register the plugin on vue 
import SidebarMenu from '@placetopay/sidebar-menu'
import '@placetopay/sidebar-menu/dist/sidebar-menu.scss'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({})

//register globally
Vue.use(SidebarMenu , { store })

// add to your base template
 
//Default properties
<sidebar-menu></sidebar-menu>

//With properties
<sidebar-menu 
        :menu-items="[]"
        :sidebar-config="[]"
>
</sidebar-menu>
```

## :notebook: Props

```js

Sidebar menu items

{
    data: [
        // Sidebar parent menu (required)
        {
            link: '#',
            name: 'Transactions',
            icon: 'fa-cash-register',
        },
        {
            // Sidebar parent menu (required)
            link: '#',
            name: 'Dashboard',
            icon: 'fa-chart-line',
            // If you have submenus, you must declare them as follows
            submenus: [
                {
                    link: '#',
                    name: 'Generals',
                    icon: 'bx-grid-alt',
                },
                {
                    link: '#',
                    name: 'Temas personalizados',
                    icon: 'bx-grid-alt',
                }
            ]
        }
    ]
}

Sidebar menu styles

{
    data: [{
        sidebarOpenLogo: '',
        // logo sidebar cloded
        sidebarClosedLogo: '',
        // color sidebar 
        bgColor: 'white',
        // color sidebar border
        bgColorSidebarBorder: 'black',
        // color text of filter search
        colorInput: 'black',
        // background color of input
        bgColorInput: 'var(--primary-color-200)',
    }]
}

```